HTML笔记
来源：互联网 发布：js eval函数 编辑：程序博客网 时间：2024/06/12 17:40
一个基本网页的格式
<!doctype html><html> <head> <meta charset="UTF-8" /> <title>网页标题</title> </head> <body> <h1>网页的内容</h1> </body></html><!doctype html><!-- html是网页的根标签，一个页面中有且只有一个html标签，网页中的所有的内容都应该写在html标签内部 --><html> <!-- 网页的头部，head中的内容不会在网页中直接显示，它用来告诉浏览器如何解析网页 --> <head> <!-- 告诉浏览器当前页面的编码字符集 --> <meta charset="utf-8" /> <!-- title中的内容一般会在网页的标题栏中显示，搜索引擎在检索网页时，会主要依据title中的内容来识别网页 title中的内容会影响到网页在搜索引擎中的排名 --> <title>网页的标题</title> </head> <!-- 网页的主体，网页中所有的可见的内容都应该写在body中 --> <body> <!-- font标签专门用来设置字体的样式的,可以在开始标签中添加属性，从而来设置浏览器如果处理标签及标签中的内容 标签中属性实际上是一组一组的名值对结构一个属性名 对应 一个属性值 属性名和标签名之间需要空格隔开,属性值需要使用引号引起来,在一个标签中可以写多个属性，属性之间使用空格隔开 --> <h1>这是我的<font color="red" size="7">第三个</font>网页</h1> </body></html>标题标签 <h1></h1>
- 在网页中为我们提供了h1 ~ h6 6个标题标签
- 从h1 ~ h6显示效果越来越小
- 在6个标题标签中，h1最重要 h6最不重要
- h1的重要性仅次于title，搜索引擎也会通过h1来判断网页的主要内容一个网页中只能有一个h1
- 一般我们只会使用h1 ~ h3 ，h4~h6 基本不用
段落标签<p></p>
表示的是一个段落,段落标签默认都是独占一行的，并且与其他内容都会有一个上下的间距
换行标签<br />
在HTML中，多个空格和换行只会被解析成一个空格,换行需要使用
标签
水平线标签 <hr />
- hr可以在页面中输出一条水平线在HTML中一些特殊符号是不能直接使用的，
比如< > 如果需要使用可以使用实体（转义字符）来代替 语法： &实体的名字; < < 例如 a<b>c 要编写成a<b> > > 空格 a b 编写成 a b 版权符号 © &#字符编码; (注意要带分号）表格编码 <ul></ul> <ol></ol> <dl></dl>
列表： 1.无序列表 ****** - 使用ul标签来创建一个无序列表 - 使用li来在ul中创建列表项 - 无序列表使用符号作为项目符号 2.有序列表 - 使用ol来创建有序列表 - 使用li来在ol中创建列表项 - 有序列表使用有序的序号作为项目符号 3.定义列表 - 通过定义列表可以对一些内容进行定义或描述 - 使用dl表来创建一个定义列表 使用dt,来表示被定义的内容 使用dd,来对该内容进行描述 三个列表之间可以互相嵌套图片标签 <img />
- 通过img标签可以向网页中来引入一个外部的图片
属性：
src 指向的是外部图片的路径(相对路径)
alt 用来设置图片的描述，该描述会在图片无法显示时才出现,搜索引擎需要通过alt属性来对图片进行识别，如果不写alt属性，搜索引擎不会对图片进行收录
width 用来设置图片的宽度
height 用来设置图片的高度- 设置图片的宽度和高度时，如果只设置一个，则另一个也会等比例缩放
- 一般情况下做pc端开发时，尽量不要设置图片的宽度和高度
例如:
超链接<a></a>
--通过超链接可以使我们的浏览器跳转到其他的页面 --使用 a 标签来创建一个超链接 - 例子： <a href="" target="">超链接的文本</a> 属性： href -指定超链接要跳转到的目标页面-跳转到外部页面，需要使用绝对路径
-跳转到内部页面，可以使用相对路径
target 设置在哪里打开超链接的页面
- 可选值
_self 默认值 在当前窗口打开链接
_blank 在一个新的窗口打开链接
-如果将超链接的href属性设置为#,则点击超链接以后不会跳转到新的页面,而是会跳转到当前页面的顶部。
-开发中还经常使用#作为超链接的占位符来使用
-可以在超链接的href属性后，写一个 #id属性值,这样当单击超链接时，将会跳转到该id对应元素所在的位置
-id属性:
- 在HTML中可以为元素添加一个id属性
在页面中不能出现相同的id属性值
- 设置跳转的位置
- 跳到该位置
-回到顶部
块元素(block)<div></div>
- 在页面中块元素会独占页面的一行
- 块元素无论自身多小总会独占页面的一行
- 学习过的块元素:div h1 h2 h3 p ul li ol dl …
- div没有语义，我们一般使用div来对页面进行布局
- 内联元素（行内元素 inline）
内联元素只会占有自身的大小不会独占页面的一行- 如果一行之中不足以容纳所有的内联元素，则元素会另起一行
- 学习过的内联元素：span a img
- 一般通过内联元素来选中文字，进而为文字来设置样式
注意：
1.一般都会使用块元素去包含内联元素，而不使用内联元素去包含块元素
2.a中可以放任意的元素，除了a自己
3.p元素中不能放任何的块元素
- 内联元素（行内元素 inline）
表格和长表格(<table></table> )
- 表格是一个块元素
- rowspan 用于纵向的合并单元格
- colspan 用来横向的合并单元格
- border-spacing 用来设置表格中边框之间的距离
- border-collapse: collapse; 用来设置表格中的边框合并
一旦设置了边框合并则border-spacing会自动设置为0，即使修改为其他值也不会起作用 - 在table中，使用 tr 来表示表格中的一行，有几行就有几个tr
在tr中使用td表示一个单元格，有几个单元格就有几个td
表格的列数有单元格最多的那行决定 th 表示表头中的单元格，可以使用th来替换表头中的td
长表格
在HTML，为了处理长表格，还为我们提供了三个标签,用于将表格分成三个部分- thead
- 表格的头部，可以将头部的tr放到thead中
- 表头中的内容，永远会在表格上部
（当文本在一个页面显示不完，要在下一页面显示时，在下一页面的最上面还有表格的头部。） - tbody
- 表格的主体，可以将主体内容的tr放到tbody中 - tfoot
- 表格的底部，可以将底部的tr放到tfoot中
- tfoot中的内容永远在表格的底部
这样方便后期维护。当鼠标要正在移入的位置上有颜色时
td:hover{
background-color:yellow;
}
- thead
表单 (<form action="提交的地址"></form>)
使用form标签来创建一个表单 属性：action - 需要指向一个服务器的地址，表单将会提交到该地址上 <form action="target.html"> - 需要向表单中添加一些表单项，使用户可以输入各种信息 - 使用input创建一个文本框 文本框中需要一个type属性，属性值text - 如果表单中的信息需要提交到服务器中，还必须要为表单项指定一个name属值-输入文本框：(属性：text) * 要设置文本框的样式的长宽高，需要在CSS样式中设置，因为长宽高都是样式.内敛样式写的方法：(style="width:50px;heigth:20px") <input type="text" name="名字，提交到服务器上必须有" /> - placeholder="请输入用户名"，在文本框中的提示http://127.0.0.1:8020/day05/target.html ? username=admin&password=123123
- 默认情况下，我们所填写的表单信息将会以查询字符串的形式传递给服务器
在url地址中 ? 后的内容称为查询字符串查询字符串实际上就是一个一个的名值对结构
名字是表单项的name属性值，值是用户填写的内容
该信息发送到服务器以后，后台可以根据名字来获取用户填写的值名值对之间使用 & 隔开
- readonly属性 ，是只读，不能写。
- disabled属性 ，是不可用。
文件域 (属性：file)
- 默认情况下，每次只能选择一个文件，要设置选择多个文件要使用属性 multiple
输入密码框：(属性；password)
密码框也是input，它的type属性是password,这样密码就会以**显示
按钮(属性:submit)
- 提交按钮也是input
- 它的type属性值是submit
- 通过提交按钮可以将表单提交到action属性对应的地址
- 可以通过value属性来指定按钮中的文字
单选选项( 属性：radio 选择框，不需要用户填写内容)
- 使用input来创建一个单选按钮，它的type属性是radio
- 单选按钮是通过name属性进行分组，相同的name属性属于一组
- 像这种选择框，不需要用户直接填写的内容，还必须指定一个value属性，value的值将会最终被提交给服务器
可以在input中添加一个 checked=”checked” 属性，来将其设置为 默认选中
多选框(属性：checkbox)
- 使用input来创建一个多选框，它的type属性是 checkbox
- 可以在input中添加一个 checked=”checked” 属性，来将其设置为 默认选中
在checkbox 的情况下，设置属性：disabled=“disabled”表示不可选
下拉列表 (标签)
- 使用select标签来创建下拉列表
- 在select使用option来表示下拉列表的选项
- 下拉列表的name属性需要写在select中，而value属性需要写在option中
- 可以在option中添加selected=”selected”来将选项设置为默认选项
- 通过optgroup可以对选项进行分组
<optgroup label="分组的名称"></optgroup> <select name="用来分组"> <optgroup label="分组的名称"> <option value="提交给服务器"> </option> </optgroup> </select> 可以通过multiple属性表示多选，size设置当前显示的选项的个数 例如：<select multiple size=”6”> 表示显示多选的个数为6- 重置按钮 (属性:reset) 作用：可以将表单重置到初始化的状态 <input type="reset" value="重置" />- 只能用作点击的按钮 （属性:button)<input type="button" 可以创建一个普通的按钮，它的唯一作用就是被点击 <input type="button" value="按钮" />- 表单里的图片（属性：image） <input type=”image” src=”图片的地址” >- methed设置提交表单的方式
get 方式数据不够安全，数据大小也有限制
通常使用 post 将数据提交到表单上
例如：
- 创建表单的内容项框架： <form action=""> - 文本框 <input type="text" name="" value="" /> - 密码框 <input type="password" name="" /> - 单选按钮 <input type="radio" name="" value="" /> - 多选框 <input type="checkbox" name="" value="" /> - 下拉列表 <select name=""> <option value=""></option> </select> - 提交按钮 <input type="submit" value="提交" /> 或是<button type="submit">提交</button> - 重置按钮 <input type="reset" value="重置" /> 或是<button type="reset">重置</button> - 普通按钮 <input type="button" value="按钮" /> 或是<button type="button">按钮</button></form>- HTML笔记-HTML基础
- 【HTML】HTML学习笔记
- html笔记
- html笔记
- html笔记
- HTML笔记
- html笔记
- html笔记
- HTML笔记
- HTML 笔记
- html笔记
- HTML笔记
- html笔记
- HTML笔记
- HTML 笔记
- HTML笔记
- html笔记
- HTML 笔记
- spring入门之IOC容器
- classList
- 扩展文件系统（Ext）
- JavaScript基本语法++、语句Statement
- 第三天：目的
- HTML笔记
- easyui-combobox添加onChange事件
- 【HDU 1159】Common Subsequence （最长公共子序列）
- 算法之 String 篇
- codeforces Gym-101246C
- 多线程之五种状态
- 无意中看到一些机器学习的问题，顺便解释下（一）
- 【思维/DP】HDU6016Count the Sheep【BestCoder Round #92】
- leetcode[Relative Ranks]//待整理多种解法
