Htmlcss学习笔记1——html基础
Hyper text markup language 超文本标签语言。不是一种编程语言，而是一种标记语言标记语言是一套标记标签
开发工具
- chrome
- subline
- vscode
- photoshop
浏览器内核
| IE内核 | Trident |
|---|---|
| Firefox | Gecko |
| Safari苹果浏览器 | Webkit |
| Chrome | Chromium/blink |
| Operapresto | presto |
html骨架
- HTML标签：所有html标签中的根节点
- Head标签：文档头部，描述文档的各种属性和信息。包括文档的标题、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。如<！DOCTYPE>声明了htm版本为html5版本
- Title标签：文档的标题
- Body标签：文档的主体，素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
html标签分类
html标签分类分为双标签和单标签，双标签具有嵌套关系、并列关系，如<div></div>；单标签有：<input/>、<img/>
html标签
特殊
<link>：定义文档与外部资源的关系，最常见的用途是链接样式表<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
属性
charset——html5不支持hrefurl ——规定被链接文档的位置hreflanglanguage_code——规定被链接文档中文本的语言medimedia_query——规定被链接文档将被显示在什么设备上relalternate\author\help\icon\licence\next\pingback\ prefetch\prev\search\sidebar\stylesheet\tag——规定当前文档与被链接文档之间的关系typeMIME_type——规定被链接文档的 MIME 类型
<meta>：定义了与文档相关联的名称/值对。提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部<meta name="keywords" content="HTML,ASP,PHP,SQL">
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
//这样发送到浏览器的头部就应该包含：
content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008
属性
*contentsome_text——定义与 http-equiv 或 name 属性相关的元信息http-equivcontent-type\expires\refresh\set-cookie ——把 content 属性关联到 HTTP 头部。当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档nameauthor\description\keywords\generator \revised\others——把 content 属性关联到一个名称。比如"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。schemesome_text——定义用于翻译 content 属性值的格式
排版标签
| 名称 | 语义 | 例子 |
|---|---|---|
| 标题标签 | head | <h1></h1>，<h2></h2>..<h6></h6> |
| 段落标签 | paragraph | <p></p> |
| 水平线标签 | horizon | <hr/> |
| 换行标签 | break | <br/> |
| div标签 | <div> </div> |
|
| span标签 | <span></span> |
文本格式化标签
| 名称 | 语义 | 例子 |
|---|---|---|
| 粗体 | strong | <b></b> <strong></strong> |
| 斜体 | <i></i> <em></em> |
|
| 加删除线 | delete | <s></s> <delb</del> |
| 下划线 | underline | <u></u> <ins></ins> |
图像标签img
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | url | 图像路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素（XHTML不支持%页面百分比） | 图像宽度 |
| height | 像素（XHTML不支持%页面百分比） | 图像高度 |
| border | 数字 | 图像边框宽度 |
链接标签a
| 属性 | 属性值 | 描述 |
|---|---|---|
| href | Url | 用于指定链接目标的url地址，Hypertext Reference的缩写。意思是超文本引用 |
| target | self_blank | 用于指定链接页面的打开方式，其中self为默认值，blank为在新窗口中打开方式。 |
herf
1. 外部链接 需要添加 `http://`
2. 内部链接 直接链接内部页面名称即可 比如 `< a href="index.html"/>`
3. 空连接 `href="#"`
4. 锚点定位
——本页面跳转
1. 给想要跳转的标签添加id名
2. 点击可跳转id名标签所在位置<a href="#id名></a>
——跳转到其他页面的锚点
1. <a id="test">锚</a>
2. <a href="test2.html#test"></a>
特殊字符标签
列表标签
| 类别 | 描述 |
|---|---|
| 无序列表 | 各个列表项之间没有顺序级别之分，是并列的 |
| 有序标签 | 有排列顺序的列表，其各个列表项按照一定的顺序排列定义 |
| 自定义列表 | 定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。 |
//无序
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
//有序
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
//自定义
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
注意：
1. <ul>中只能嵌套<li>直接在<ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
3. 无序列表会带有自己样式属性
表格标签
| 类别 | 描述 | 语法 |
|---|---|---|
| 表头标签 | 表头一般位于表格的第一行或第一列，其文本加粗居中。 用表头标签替代相应的单元格标签 | <tr> </tr> <th><th/> |
| 表头标题 | caption 元素定义表格标题。 | <caption></caption> |
| 表格结构 | 表格可划分为头部、主体和页脚 <thead></thead>用于定义表格的头部。必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。 <tbody></tbody>用于定义表格的主体。 位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。 |
<thead><thead/> <tbody><tbody> |
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
<tr>
<th>表头<th/>
</tr>
<table>
<caption>表格标题</caption>
</table>
<table>
<thead><thead/>
<tbody><tbody>
<table/>
| 属性名 | 属性值 | 含义 |
|---|---|---|
| border | 设置表格的边框（默认border=“0”无边框） | 像素值 |
| cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值（默认为2像素） |
| cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值（默认为1像素） |
| width | 设置表格的宽度 | 像素值 |
| aline | 设置表格在网页中的水平对齐方式 | left、center、right |
| rowspan | 数字 | 跨行合并单元格 |
| colspan | 数字 | 跨列合并但管个 |
表单标签
| 类别 | 属性 | 属性值 | 描述 |
|---|---|---|---|
| input | type | text | 单行文本输入框 |
| password | 密码输入框 | ||
| radio | 单选按钮 | ||
| checkbox | 复选框 | ||
| button | 普通按钮 | ||
| submit | 提交按钮 | ||
| image | 图像形式的提交按钮 | ||
| file | 文件 | ||
| name | 由用户自定义 | 控件的名称 | |
| value | 由用户自定义 | input控件中的默认文本值 | |
| size | 正整数 | input控件在页面中的显示宽度 | |
| checked | checked | 定义选择控件默认被选中的项 | |
| maxlength | 正整数 | 控件允许输入的最多字符数 | |
| label | - | - | label 标签为 input 元素定义标注（标签）。 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点 |
| textarea | |||
| select | 下拉菜单，至少包含一对<option></option>; 在option中定义selected="selected“时，当前项即为默认选中项 |
||
| form | action | url地址 | |
| method | Get/post | ||
| name | 用于指定表单的名称，以区分同一个页面中的多个表单。 |
//label
<form>
<label for="male"</label>
<input id="male" />
</form>
//文本域
<textarea cols="每行字符数" rows="行数"></textarea>
//下拉菜单
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
路径
| 类别 | 描述 |
|---|---|
| 相对路径 | 以网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。 |
| 绝对路径 | 绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的 |
- 图像文件和HTML文件位于同一文件夹：
<img src="logo.gif"/> - 图像文件位于HTML文件的下一级文件夹：
<img src="img/img01/logo.gif" /> - 图像文件位于HTML文件的上一级文件夹：
<img src="../logo.gif" /> D:\web\img\logo.gifhttp://www.itcast.cn/images/logo.gif
Htmlcss学习笔记1——html基础的更多相关文章
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Java学习笔记：语言基础
Java学习笔记:语言基础 2014-1-31 最近开始学习Java,目的倒不在于想深入的掌握Java开发,而是想了解Java的基本语法,可以阅读Java源代码,从而拓展一些知识面.同时为学习An ...
- 卷积神经网络(CNN)学习笔记1：基础入门
卷积神经网络(CNN)学习笔记1:基础入门 Posted on 2016-03-01 | In Machine Learning | 9 Comments | 14935 Vie ...
- 「学习笔记」字符串基础：Hash，KMP与Trie
「学习笔记」字符串基础:Hash,KMP与Trie 点击查看目录 目录 「学习笔记」字符串基础:Hash,KMP与Trie Hash 算法 代码 KMP 算法 前置知识:\(\text{Border} ...
- 【学习笔记】Linux基础（零）：预备知识
学习笔记(连载)之Linux系列 Note:本学习笔记源自<鸟哥的Linux私房菜(基础学习篇)>一书,为此书重要内容的摘要和总结,对于一些常识性的知识不再归纳 新型冠状病毒引发的肺炎战& ...
- 【JAVAWEB学习笔记】06_jQuery基础
接05的学习笔记. 四.使用JQ完成省市二级联动 1.需求分析 使用jquery完成省市二级联动 2.技术分析 2.1数组的遍历操作 方式一: $(function(){ // 全选/ 全不选 $(& ...
- ios开发学习笔记001-C语言基础知识
先来学习一下C语言基础知识,总结如下: 在xcode下编写代码. 1.编写代码 2.编译:cc –c 文件名.c 编译成功会生成一个 .o的目标文件 3.链接:把目标文件.o和系统自带的库合并在一起, ...
- HTML学习笔记之标签基础
目录 1.基本标签 2.链接 3.图像 4.表格 5.列表 6.块与布局 1.基本标签 (1)标题与段落 标签 <h1> ~ <h6> 分别用于定义一至六级标题,标签 < ...
- Java学习笔记之—Java基础
将学习到的JAVA基础用xmind记录了下来,需要原件的可以私信
随机推荐
- 发送ajax请求时候注意的问题
1.在发送ajax请求一般都是默认为异步,就是不去等待后台响应直接可以继续发送, 但这样会有时候遇到一些问题,无法获得后台的响应参数, 所以在你打开编辑弹出框完成数据编辑后无法刷新页面, 这时候可能存 ...
- Linux常用命令之ls、cd、pwd、mkdir命令讲解
ls命令令是Linux最常用的命令之一,也是一条非常古老的命令.在开始学习Linux命令之前,还是想给大家一条建议: 很多同学可能刚开始学习Linux,然后就去买一些教材去学习,教材上面有可能收集了L ...
- 记录一次线上实施snmp
公司要实施一个部级的项目,我们公司的提供的产品要对接下客户的一个平台监控平台,该监控平台使用snmp,我们公司的产品不支持snmp,所以由我负责在现网实施snmp,记录这次现网 一.生成编译规则 1. ...
- Pr剪辑
目录 Pr剪辑教程 入门基础 创建序列类别 处理非正常序列 导出文件 导出设置 导入各类别素材 简单使用: 剪辑素材常用方法 剃刀工具 选择工具 波纹编辑工具 打入点和出点 剪辑速度 整个素材视频速度 ...
- Angular 10材质的模态弹出示例和教程
在本教程中,我们将通过示例使用Angular 10材质构建模式弹出窗口. 在这里,我们将研究创建Angular 10项目,安装和设置Angular 10材质,以及创建自定义材质模块文件. 在本教程中, ...
- Pytorch Autograd (自动求导机制)
Pytorch Autograd (自动求导机制) Introduce Pytorch Autograd库 (自动求导机制) 是训练神经网络时,反向误差传播(BP)算法的核心. 本文通过logisti ...
- 【FZYZOJ】珂神不等式&平角咖啡厅 题解（二分答案）
前言:这题太神了,蒟蒻表示思路完全断档,甚至想到DP.得到大佬hs-black的帮助后才AC此题orz --------------------------------- 题目描述 ck love…… ...
- intellij idea springboot无法读取配置文件的解决方法
问题描述 Spring Boot项目中运行之后,出现如下的错误: *************************** APPLICATION FAILED TO START *********** ...
- LinuX操作系统基础------>了解文件结构和相关的文件操作
了解LinuX文件系统 熟悉LinuX的文件结构 熟悉LinuX的基本操作指令 利用所学指令进行指令组合操作 什么是文件?什么是目录? 文件:一般是一个独立的东西,可以通过某些工具将其打开 目录:可以 ...
- 22、Command 命令模式
1.command 命令模式 命令模式(Command Pattern):在软件设计中,我们经常需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求的操作是哪个,我们只需在程序运行时指 ...