Web入门梳理：HTML

html

认识网页

代码 -> 浏览器渲染 -> 用户所看到的网页

常见浏览器

谷歌浏览器、Safari…

浏览器内核

内核：Safari（webkit）、Chrome（Blink）
渲染引擎（独立的JS引擎）

web标准

不同浏览器 不同内核 解析执行的代码 可能运行不一致；所以需要制定统一的web标准；
W3C组织指定：

• 结构：结构标准；HTML 使内容更清晰；
• 表现：样式标准；CSS 用于修饰内容的样式；
• 行为：行为标准；DOM ECMAScript 内容的交互及操作效果；

HTML初识

Hyper Text Markup Language，超文本标记语言；文件后缀.html；

主要通过html标签 对网页中的文本、图片、声音等内容进行描述；

HTML

平时已经很熟悉的标签就略过了

文本格式化标签：

标签	显示效果	备注
<b></b> <strong></strong>	粗体	XHTML 推荐使用strong
<i></i> <em></em>	斜体	XHTML 推荐使用em
<s></s> <del></del>	加删除线	XHTML 推荐使用del
<u></u> <ins></ins>	加下划线	XHTML 推荐使用ins

a标签

<a>:

可以指定有效连接，同项目目录下的html文件，#id（实现锚点定位）

<a>标签的target属性:

设置打开方式，是在当前页面打开（_self）还是新建界面打开（_blank）;

<base>:

和img br hr 都是单标签；base是使用在head标签中的标签，可以设置页面中统一的链接打开方式，与a标签一样，也是使用target属性进行设置；（局部优先于整体）

特殊字符替换代码：

特殊字符	描述	替换代码
	空格符	&nbsp
<	小于号	&lt
>	大于号	&gt
&	与符号	&amp
￥	人民币	&yen
©	版权符	&copy
®	商标符	&reg
˚	摄氏度	&deg
±	正负号	&plusmn
✖️	乘号	&times
➗	除号	&divide
²	平方（上标2）	&sup2
³	立方（上标3）	&sup3

<p> & 对应代码 <p> &

一个特殊字符 的替换代码结束后使用分号；连续出现的时候 也需要；

有序/无序列表注意事项：

• ul 只允许嵌套li
• li 相当于一个元素，可以放其他元素；
• 列表会有自己的样式，不要在意，使用CSS来美化；

自定义列表：

<dl>
    <dt>标题分类</dt>
    <dt>描述项</dt>
    <dt>描述项</dt>
    <dt>描述项</dt>
</dl>

table标签（表格）：

不是用来布局的，而是用来处理表格数据的；

<!-- 表格 -->
<table>
<!-- 行 -->
    <tr>
        <th>表头</th>
        <th>表头</th>
        <th>表头</th>
    </tr>
    <tr>
        <td>表格单元项</td>
        <td>表格单元项</td>
        <td>表格单元项</td>
    </tr>
</table>

表格属性：

属性	描述	常用值
border	设置边框（默认为0表示无边框）	像素值
cellspacing	表格单元格边框之间的空白间距	像素值（默认2）
cellpadding	表格单元格内容与其边框的空白间距	像素值（默认1）
width	设置表格宽度	像素值
height	设置表格高度	像素值
align	设置表格在网页中的水平对齐方式	left center right

表格结构：

<table>
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

表格合并单元格：

跨行合并：rowspan属性，跨列合并：colspan属性，指定td元素的属性数值即可；

表单标签：

用于向服务器传输数据；包含一些表单控件；

表单控件和表单域：

• input控件

  单标签；通过type属性变换成多种控件样式；

• input控件属性：

属性	值	描述
type	text	单行文本输入框
	password	密码输入框
	radio	单选按钮
	checkbox	多选框
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图片形式的提交按钮
	file	文件域 如选择上传文件
name	自定义	控件名，可以对多个表单控件进行分组，只需name值相同
value	自定义	控件中 文本值，注意是文本值！
size	正整数	控件在页面中显示宽度
checked	checked	定义 选择控件项 是默认被选中的项，如多选框的多个项，希望那个是默认选中 就为那个项添加该属性
maxlength	正整数	控件允许插入的最多字符数

图片按钮实例：<input type="image" src="test.png" />

• label标签：

  用于绑定一个榜单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点；

  <label> 第一种方式：直接包裹<input type="text" /> </label>
  
  <label for="male"> 第二种方式：使用for属性指定表单元素id</label>
  <input type="text" name="sex" id="male" value="male" />
  

• textarea标签（文本域）

  <textarea coles="每行中的字符数" rows="显示的行数"></textarea>

• select下拉菜单：

  <select>
    <option>1</option>
    <option>2</option>
    <option selected="selected">修改默认选中项</option>
  </select>
  

• 表单域

  文本域（textarea） ；文件域（input type=“file”) ；表单域（form） 注意区分理解；

  form表单域：用于收集控件信息，进行提交；多个表单域可以通过name属性进行区分；

<form action="提交地址" method="post" name="表单名称">
</form>

---