html

Posted 2022-04-14 dch0

1.结构元素顺序

|-文档版本声明
|-html标签
  |-head
    |-meta
    |-title
    |-link
    |-style
    |-script
  |-body
    |-style、script、其它语义标签

块级元素：占满一行

行内元素：在一行内一个挨着一个

注释：

• 行注释：

<!-- -->
注释掉不在页面显示

• 段落注释

<!-- 页面开始 -->


<!-- 页面结束 -->
主要用来区分这部分代码以及介绍

• 条件注释

<!-- [if IE 8]>
<div>是ie8</div>
<![endif]-->
条件注释只在IE10以下版本的浏览器中生效，兼容性检查必备

2.html语义化标签

2.1标题

• 块级元素

<h1>一级标题，32px</h1>
<h2>二级标题，24px</h2>
<h3>三级标题，18px</h3>
<h4>四级标题，16px</h4>
<h5>五级标题，14px</h5>
<h6>六级标题，12px</h6>

2.2段落标签

• 块级元素

<p>段落内容</p>

2.3font标签

• 格式化文本，只能控制字体，大小，颜色,不建议使用（已过时）

<font size face color>文字内容</font>
颜色的三种表示方法 颜色名 16进制 rgb颜色（red，#ffaabb,rgb(185,125,33)）

2.4链接标签

<a href="" target=""></a>
href:（正确读音ref）
  "javascript:;",禁止跳转（可通过js跳转）
  "http://www.imooc.com/"，跳转指定链接
  "元素选择器"，页内锚点
target：
  "_blank",新窗口打开
  "_self",本窗口打开（默认）

• 使用css对a标签的样式修饰

a
    text-decoration:none;/*删除下划线*/
    cursor:none;/*删除光标悬浮小手*/

a:visited
    color:#333333;/*改变链接访问过的默认颜色*/

2.5图像

• 支持格式：png jepg gif pdf

<img/>
src:图片路径
alt:加载失败时提示

• 非标签方式插入图片

.imooc-logo 
            background: url(img/logo.png);
            width: 200px;
            height: 80px;
        
<p class="imooc-logo"></p>

2.6列表

• 无序列表，type属性不建议使用

<ul type=''>
    <li>苹果</li>
    <li>水蜜桃</li>
</ul>
type：
    disk 小圆点
    circle 空心圆
    square 正方形

• 有序列表

<ol>
    <li>烤冷面</li>
    <li>麻辣烫</li>
</ol>

• 自定义列表

<dl>
    <dt>正数</dt>
    <dd>大于0的数</dd>
    <dt>负数</dt>
    <dd>小于0的数</dd>
</dl>

2.7div标签

• div块，用来布局，很常用，很重要

3.带格式作用的标签

3.1文本格式化

加粗<b> <Strong> 
强调（斜体）<em> 
大号字体<big> 
小号字体<small> 
下标<sub> 
上标<sup>
一般不使用这些标签，可能在不同的浏览器下表现形式不一致，直接用css修饰

• 预格式文本

pre 自带缩进，主要用来包括代码

• 引用

<blockquote> 不常使用

• 删除线

删除线<del>
下划线<ins>
兼容性不好,一般用css模拟

3.2表格

表格头【可选】
表格体【可选】
表格行【必选】
单元格【必选】
<table> 表格体、表格容器
<thead>表格头
<tbody>表格体
<tfoot>表格尾
<tr>行
<th>表格头（加粗）
<td>列

• 表格属性

border边框 值影响table的粗细
cellspacing 单元格边距
cellpadding 单元格内边距
colspan 单元格跨列（左右合并，从左到右合并）
rowspan 单元格跨行（上下合并，从上到下合并）
align 对齐方式

3.3HTML表单

<form action method name autocomplete enctype></form>
autocomplete:浏览器是否可以自动填充
enctype:指定表单内容编码，默认UTF-8

• input（text，password，radio，checkbox，button）

<input type="text" value="默认值" maxlength="限制输入字符个数"/>  
<input type="password" value="默认值"/>

<!--checked 默认选中-->
<input type="radio" name="sex"/><input type="radio" name="sex"/><!--同一name为一组-->
<input type="checkbox" checked/><input type="checkbox"/><!--同一name为一组-->
<input type="button" value="注册"></input>
<input type="number"><!--h5中新加入的属性-->
<input type="date"><!--h5中新加入的属性-->
<input type="color">
<input type="range" min="0" max="100"><!--拖动条-->
<input type="email"><!--引入邮件的格式校验-->
<input type="url"><!--引入url的格式校验-->
<input type="file" multiple="multiple"><!--multiple多文件选择-->
<input type="submit" >

• select

<select name="">
    <option value=""></option>
    <option value="" selected></option>
</select>

• textarea

<textarea rows="几行高度" cols="几个字符宽度"></textarea>
<!--使用css禁止拖拽大小-->
textarea
resize:none;

• button

<button type="submit" form="表单名"></button>
<!--当类型为submit，但不在form中时，用form属性指定表单名-->
type:
    submit 提交表单
    reset重置表单输入