html笔记

Web和Internet

l  Web工作原理：浏览器向服务器发送请求request，服务器向浏览器进行响应response；

l  Internet实现技术

• 分组交换原理：信息在Internet上分组传输，到达目的地后重组为信息；
• TCP/IP协议簇
• 通信协议HTTP协议：HyperText Transfer Protocol：超文本传输协议

l  HTML：超文本标记语言：浏览器解释执行，可以套用脚本语言编写的程序段。

 

 

HTML基础知识

l  转义字符

• ¥          钱币￥
•           空格
• &lt;           小于号<
• &gt;           大于号>
• &copy;         企业标识符©

l  常见的Html标记：

双标记：div、p、h1-h6、ul、ol、li、span、form……

单标记：a、img、br、input、doctype

块级元素：div、p、h1-h6、ul、ol、li

行内元素：a、img、span、b、i、input、span

注1：行内元素可以用来设置同一行文字的不同样式；

注2：行内元素如span不能设置宽度，就设置不了文字的居中对齐，如何解决？

①　要在外层套个块级元素如div，设置宽度，然后<div align="center">或<div style="text-align: center">；

②　或者设置行内元素的float为left/right或display为inline-block，给这个行内元素设置宽度，然后设置该元素的text-align属性值为center；

l  如何控制同一行的文本既有左对齐，又有居中对齐？

p{text-align:center;}

.span1{float:left;}

<p>

<span class="span1">hello</span>

        <span class="span2">world</span>

</p>

l  访问路径：

ü  绝对路径：协议://主机名:端口号/目录路径/文件名；

ü  相对路径：平级直接找名字、上级找下级从平级向下用/、下级找上级用../向上翻；一个../代表向上翻一级；

ü  根相对路径：/images/…… 直到找到文件

l  图像img元素：单标签

ü  必须属性：src：制定图片的路径

ü  常用属性：width、height、title、alt

ü  插入的图片若想居中显示，要在<img>外层套个<p>或<div>等块级元素，用块级元素的align=”center”控制<img>元素水平居中

注1：title:鼠标移入时显示的文字

注2：alt:鼠标移入时显示的文字；图片不显示时的提示文字

l  表格元素（尽量避免使用，用div+css布局代替）

<table>                        ==>border,borderColor,width,height,

align,cellspacing,cellpadding,

背景色bgcolor,背景图片background=”路径”

    <caption>表格标题</caption>

    <thead>                    ==>行分组

        <tr>                   ==>align,valign,height

            <td>00</td>       ==>跨列colspan,跨行rowspan,bgcolor,

align,valign,background,width,height

            <td>01</td>       ==>表头行的td可换成th(字体加粗、居中)

        </tr>

    </thead>

    <tbody>                    ==>行分组

        <tr>

            <td>1100</td>

            <td>1101</td>

        </tr>

    </tbody>

    <tfoot>                    ==>行分组

        <tr>

            <td>2200</td>

            <td>2201</td>

        </tr>

    </tfoot>

</table>

注：align:left/center/right     valign:top/middle/bottom

当tr和td属性冲突时，如果是width/height：值大优先；如果是对齐方式，就近原则。

l  横线hr元素

• hr添加横线时，size属性设置粗细；width属性设置宽度；color设置颜色；align设置水平对齐方式。

l  超链接a元素

• 用作超链接跳其他页面：<a href=” ”/>
• 用作锚点跳本页面指定位置：<a name=”top”/>   <a href=”#top”/>
• 注：如果锚点在其他页面，在“#”前要写该页面的URL

l  列表元素

• 有序列表

<ol>           ==>属性：type=”1/A/a/I/i”;start=从几开始

<li></li>

<li></li>

</ol>

• 无序列表

<ul>           ==>属性：type=”disc/circle/square”;start=从几开始

<li></li>

<li></li>

</ul>

• 定义列表

<dl>

<dt></dt>

<dd></dd>

</dl>

l  标题元素

• <h1></h1>
• <h2></h2>
• <h3></h3>
• <h4></h4>
• <h5></h5>
• <h6></h6>

l  结构化标记（HTML5新增）

• <header></header>
• <nav></nav>
• <section></section>
• <article></article>
• <aside></aside>
• <footer></footer>

l  预格式化标签

• <pre></pre>

注：pre里面的小于号、大于号、空格等，都要用转义字符

l  表单元素：表单提交时，name属性值非常重要

• form元素的属性：

ü  enctype:表单数据编码方式；上传文件时的编码值multipart/form-data

ü  action:服务器处理数据的程序地址

ü  method:请求方式：

①　明文get：2kb以下

②　密文post：不限制数据长度

ü  name:定义表单名称，方便JS获取

• form主要包含：

1. input：type可以为text、password、radio、checkbox、button、reset、submit、file、hidden等；
2. textarea：多行文本域
3. select和option：下拉/滚动列表
4. 其他不常用元素：

• input元素的属性：在CSS中可设置input元素的width和height

²  type

ü  <input type=”text” />文本框：maxLength、readonly、name、value

ü  <input type=”password” />密码框：maxLength、readonly、name、value

ü  <input type=”submit” />提交按钮：value:按钮上的文字、name

ü  <input type=”reset” />重置按钮：value:按钮上的文字、name

ü  <input type=”button” />普通按钮：value:按钮上的文字、name

ü  <input type=”radio” />单选框：name、value、checked预选中

ü  <input type=”checkbox” />复选框：name、value

ü  <input type=”hidden” />隐藏域：name、value：安全要求高、不想让用户看到的数据

ü  <input type=”file” />文件框，如上传头像时到存储盘里找文件使用（头像、txt、rar……）：name、value：

注：要将form的enctype属性设置为multipart/form-data

²  name：定义控件名，没有name不能提交。一组单选框/复选框的name必须一致，设置名称用于分组；

²  value：单/复选框的value是控件的数据，提交时value值会被发送到服务器；disabled：禁用控件；

²  disabled：禁用控件；

• 多行文本域<textarea></textarea>：注册时详细条款、接收用户输入的多行数据

²  name

²  id

²  cols(默认横向展示的英文字符个数)

²  rows(默认纵向展示的英文字符个数)

²  readonly：只读

• 下拉/滚动列表select和option

²  select的属性：

①　name:提交给服务器的名字

②　size:显示几条给用户看，大于1则为滚动列表

③　multiple:是否允许多选(按住ctrl可选多项)

²  option的属性：

1．value：选项值

2．selected：预选中

²  示例代码

<select>

<option></option>

<option></option>

<option></option>

</select>

• 其他不常用元素:

²  <label>文本</label>：label元素的for属性，指向表单元素的id值

²  表单元素分组控件：
    <fieldset>

<legend>此分组的标题</legend>

……(所要放在这个分组的范围)

</fieldset>

²  浮动框架：<iframe></iframe>

src、height、width、frameborder(0:无边框;1:默认有边框)

²  摘要与细节：

<details>：可添加文本或图像

<summary></summary>：details第一个子元素

</details>

²  度量元素<meter></meter>:多用于进度/比例的显示

min(默认为0)、max(默认为1)、value(默认为0)、title

²  时间元素<time></time>

²  高亮度显示<mark></mark>

 

l  <!DOCTYPE>：

由于早期互联网公司（网景的Netscape和微软的IE）之间的混乱竞争，没有遵循W3C提出的标准。现在浏览器开发商不得不面临一个抉择：逐渐遵循W3C的标准是前进的方向。但如果浏览器突然以W3C标准的方式解析现存的CSS，陈旧的网站显示会受到影响。

解决方案:

• 1：允许网站开发者能够选择他们所熟知的模式。
• 2：依然使用旧式规则显示陈旧的网站。