Web前端三大核心技术之-HTML
HTML概念
全称：
超文本标记语言（HyperText Mackeup Language），非编程语言，为描述性语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等
基本格式:
<html>
<head><title></title></head>
<body></body>
</html>
<html>开始</html>结束- 里面由头部分
<head></head>和体部分<body></body>两部分组成 - 头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载
- 体部分是真正存放页面数据的地方
注意：Html代码不用区分大小写
解析：
- 放在html文件的开头，但没有实质性的功能，即使没有这个标记，浏览器在碰到其他的html标记时也一样会进行解析
- 浏览器内置了html语言的解析器
- head:头标记，放置关于此html文件的信息，如提供索引，定义css（前端三大核心技术之二）等
- title:标题标记，包含在head标记内，它的作用是设定网页的标题
- body:主体标记，网页所需要显示的内容都放在这个标记内
书写规范
- 多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束
- 想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择
- 属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范
HTML标签
- 注释
<!-- --> - 标题标签
<hx>：hx的取值是从h1-h6。字体从大到小，字体加粗，自动换行 - 文字粗体标签：
<b> - 文字斜体标签：
<i> - 下划线标签：
<u> - 换行标签：
<br>，换行标签是单个使用的标记 - 段落标签：
<p> - 空格标签：
 
字体标签
使用的格式是：
<标签名 属性1="属性值1" 属性2="属性值2" 属性3="属性值3" ...>内容</标签名>
注意：属性值可以是"",也可以是’’,也可以不写引号。但是，推荐使用""
-font：字体标签
属性
- color:颜色
- size:大小 值得取值范围是1-7
- face:字体标签 可以同时指定多个字体，如果都没有满足的，就采用默认字体。
<hr>：水平分割线
文字列表标签
-
ol有序列表：
属性：
- start 从?开始,默认是1。
- type- 类型：A,a,I,i,1 默认是数字1
- 子标签：li
<ol>
<li>a</li>
<li>b</li>
</ol>
- ul：无序列表
属性：
- type 空心圆circle 、实心圆disc 、实心方块square ，默认disc
子标签：li
-
dl：定义列表
子标签：
- dt：定义语
- dd：定义说明
<dl>
<dt>a</dt>
<dt>b</dt>
<dd>b</dd>
</dl>
图片标签
-img
属性：
- src 图片的位置
- height 高度
- width 宽度
- alt 当图片不存在的时候，给出的提示
- title 真的图片你把鼠标至于上面给出的提示信息
注意：如果同时给宽和高，请注意图片本身的比例，否则，你直给宽或者高即可。它会自动按照缩小或者增大的比例显示。
超链接标签
-a
属性：
- href 提示我们链接的地址
- target 打开方式 _blank 在一个新的页面打开
注意：如果做超链接操作的时候，你没有告诉href这个属性你采用的是什么类型的协议，默认采用的是文件解析协议你想使用网址的时候，请自己加上http协议
<a href="https://www.baidu.com"></a>
3.锚链接：
定义一个锚点，然后再和超链接结合使用
定义锚点：
<a name="锚点名"></a>
使用锚点：
<a href="#锚点名">返回xxx</a
表格标签
-table
属性：
- border:表格的边框，默认是0
- width:表格的宽度，既可以给像素,还可以给百分比
- height:表格的高度
- align:水平位置 left,center,right
子标签：
- caption：表格的标题
- tr 表格的行标签
- th 标题列标签
- td 每一行的列标签，单元格，默认是居左
表格边框的设置：
- border:表格的外边框粗细
- cellspacing:表格的内边框粗细，单元格直接的间距
- cellpadding:设置文字到单元格的距离
表格相关颜色的设置：
- bordercolor:边框颜色
- bgcolor:背景色
表格的内容的位置设置：
- align:文字的水平位置 left,center,right
- valign:文字的垂直位置 top,middle,bottom
表单标签
-form
属性：
- action:表单提交的目的地。默认是当前页
- method:提交方式 post,get 推荐使用post
子标签：
input
属性：type- 表单元素的类型 默认的是文本框类型（text）
文本框:
type="text" 表示这是一个文本框
name="username"将来用于服务器取值使用 （重要！）id="username"将来用于js获取值使用（id很重要！！）size="40"用于控制文本框的长度,能存储的字符的个数value="请在这里输入用户名"是文本框的默认值，一般用于提示。readonly="readonly"是标记属性，告诉文本框我是只读的。本身没有值，但是为了符合新的规范，属性必须有值，所以，我们就把它的值和属性设置为一样的，可以通过表单提交获得到值，一般用于用户修改表单内容作限制（不让用户修改）disabled=”disabled”把当前文本框变成灰色，不能修改只能看，不能通过表单隐藏域：type=”hidden”要设置name和value
密码框：
type="password" 表示这是一个密码框
name="password"将来用于服务器取值使用 （重要！）id="password"将来用于js获取值使用（重要！）size="40"用于控制密码框的长度value="admin"默认值readonly="readonly"是标记属性（同文本框）
单选框：
type="radio" 表示这是一个单选框
name="sex"将来用于服务器取值使用（重要） -注意：如果多个单选按钮时互斥关系，那么，就必须把这多个按钮看做一个按钮组，一个按钮组的名字必须是一致的。id="man"将来用于js获取值使用value="男"将来服务器真正获取到的值checked="checked"是标记属性，默认选择按钮组的一个值
复选框：
type="checkbox" 表示这是一个复选框
name="xxx" 将来用于服务器取值使用
注意：这里的name如果不一样，那么，有多少个复选框，将来服务器就要获取多少次值，然后判断值是否是null,不是null才把值给存储起来，如果这里的name值一样，在服务器只需要获取一次即可
String getValue(String name) 根据名字获取单个值
String[] getValues(String name) 根据名字获取数组
-
id="sleep"将来用于js获取值使用 -
value="睡觉"将来服务器真正获取到的值 -
checked="checked"是标记属性,默认选择按钮组的一个值
文件框:
-
type="file"表示这是一个文件框 -
name="file"将来用于服务器取值使用 -
id="file"将来用于js获取值使用
按钮:
type="button"表示这是一个按钮type="submit"表示这是一个提交按钮，内置了js事件type="reset"表示这是一个重置按钮，内置了js事件
注意：
下拉框和文本域不是input的type属性能够决定的
选择框（下拉框）：
-select标签
-
name="province"将来用于服务器取值使用 -
id="province"将来用于js获取值使用
子标签：
–option 标签
-
value="湖北省"，服务器实际获取的值 -
selected="selected"默认选中项 -
multiple：把select标签展开，可以多选
-
size="6"：设置select展开的行数
文本域：
cols="40"列数rows="10"行数name="myself"将来用于服务器取值使用id="myself"将来用于js获取值使用- 不具有value的属性，值写在元素中间
HTML框架集
框架集一般用于内嵌模块或页面
框架集标签：frameset
属性：
- rows:行分割
- cols:列分割
子标签：
–frame
属性 ：
- src=
"http:xxx.com":指定要嵌入的页面 noresize="noresize"可以阻止border拖拽- name:用于指定展示的内容所在的frame
HTML转义
字符实体:一些字符在 HTML 中拥有特殊的含义，比如小于号 (<) 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体
