Web 页面制作基础——HTML基础

HTML

🔹HTML是一种标记语言

🔹HTML的基本结构

🔹HTML中用“<” 和 “>”扩起来的单词，通常叫做元素

🔹HTML有单标签和双标签

🔹HTML常见的全局属性

        id:用于指定元素的唯一id

        class：全局属性class用于为HTML元素定义一个或多个类名。类名可以应用于相同类别的多个元素，从而实现样式和行为的共用       

        style:用于指定元素的行内样式

        title:用于指定元素的行内样式。通常会在鼠标移动到元素上时显示定义的提示文本

🔹鼠标事件

        onclick:当在元素上单击鼠标时触发

🔹HTML的主体元素

        <base>：为页面上的所有链接规定默认地址或者默认目标（target）

        <script>：用于定义客户端脚本，如Javascript

🔹HTML中的无语义元素

        <div>是块级标签，用于分类

        <span>是内联标签，用于文本，与<p>标签不同，<p>标签独占一行是浏览器的宽度，<span>标签的宽度是由内容的宽度决定

🔹HTML的图片元素

图片的URL指储存图像的位置，可以是相对路径，也可以是绝对路径（绝对路径很少用到）

相对路径指的是相对于当前文件，平级关系可以直接使用，“ ./ ”表示当前目录下，“ ../ ”回到上一级目录，图像不显示时，“alt”中的文字显示

🔹HTML的超链接元素

<a>标签是最常见的链接形式，链接目标可以是站内目标，也可以是是站外目标；站内目标可以用相对路径，也可以用绝对路径，站外目标则必须用绝对路径，（它也是一个行内标签）

超链接的网页跳转可以使用<a>标签的target属性，它的默认值为_self,就是在超链接所在的窗口打开页面，_blank,是在新的浏览器窗口打开页面

如果想要所有超链接都实现在新的浏览器窗口打开可以在head中使用<base>标签设置target属性

锚点链接：一份大型文档可以分成多个小节，读者可以通过锚点链接快速定位到自己想看的部分。锚点通常用唯一属性值id 设定，然后在<a>元素的href 属性中用“#+对应的锚点”即可。

图像链接：就是在<a>中嵌套一个<img>元素

空链接：href="#"，会产生回到顶部的效果

🔹HTML的列表元素

        无序列表：用<ul>定义无序列表，用<li>定义列表项（必须写在<li>内），<ul>的type属性定义图形符号样式（不常用）

        有序列表：用<ol>定义无序列表，用<li>定义列表项（必须写在<li>内），<ul>的type属性定义图形符号样式（不常用）

        定义列表：定义列表用<dl>标签定义， 每个列表项标题用<dt>标签定义，列表项标题内部又可以有多个列表项描述，用<dd>标签定义。

🔹HTML的表格元素

表格用<table>标签定义。表格标题用<caption>标签定义，每个表格均有若干行，用<tr>标签定义，每行被分割为若干单元格，用<td>标签定义，当单元格是表头时，一般用<th>标签定义。

🔹HTML的表单元素

网页内的表单是由<form>标签定义的,其他的表单控件元素必须放在<form>元素内部否则，单击submit按钮提交时会丢失参数。<form>标签最重要的属性为action和method。action属性定义了表单提交的地址，通常为一个URL地址:method属性定义了表单提交的方式，通常用post，有时会用get，在大部分情况下，表单控件元素用的是<input>元素，它是一个空元素，没有结束标签 <input>元素可以通过type的属性值定义 表单控件（input行内块元素，不能设置它的宽，它的宽度由内容的宽度决定）

多个选项标签需要有相同的name属性 默认选中需要额外配置checked='checked' 当属性名与属性值相等的时候可以简写checked

下拉列表可以使用<select>和<option>两个元素来实现效果。用<select>定义列表，用<option>定义列表项。这种列表参数需要的属性分别是<select>的name 属性和<option>的 value属性。<select>的 size 和 multiple属性决定了是下拉列表还是滚动列表。size属性用来设置选择栏的高度;multiple属性用来决定是多选列表，还是单选列表，它的值只能是multiple。
如果想让哪个<option>默认选中，只需要给它加上属性selected="selected"即可

用于输入更多的文本。在表单行文本用的是<textarea>元素。
<textarea>标签具有name、cols、rows3 个属性。其中，name用于提交的参数，value源自输入的文本内容:cols和rows分别定义文本框的列数和行数，即宽度和高度。

---