HTML 教程


html

固定标签的说明

<!DOCTYPE>声明文档类型,本省不属于html,值有html(H5)xhtml(xml)等;该标签位置固定,写法固定,一般在该文档的第一行开头,或者必须在<html>标签之前
<lang='en'>声明当前文档的语言,默认为en(英语),其他值有zh-CN(中文),fr(法文)等;但不影响浏览器中的显示;作用为提醒浏览器(比如chrome中点击翻译功能显示的默认值,有时是英文,有时是发文)
charset="UTF-8"字符集,默认是utf-8,除了这个还有很多,比如GB2312等;utf-8满足了各个国家的字符编码格式,以便于乱码的情况出现

常用标签

标题标签 <h1>~<h6>

一共有个,从大到小h1到h6,为双标签,独占一行

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

段落标签<p>、换行标签

<p>将文字分段,双标签;会根据浏览器的大小自动换行;段落与段落之间会有段间距<br/>会强制产生换行;单标签;只换行,不起到换段落的作用

<p>balabalabalabalabala</p>
<p>balabalabalabalabala</p>
<p>balabalab<br/>alabalabala</p>
<p>bala<br/>balabal<br/>abalabala</p>

文本格式化标签(加粗,斜体,下滑线,删除线)

加粗:*<strong>或<b>
斜体:*<em>或<i>
下划线:*<ins>或<u>
删除线:*<del>或<s>

为推荐使用标签,语义更强烈

<strong>strong加粗</strong>
<b>b加粗</b>
<em>em斜体</em>
<i>i斜体</i>
<ins>ins下划线</ins>
<u>u下划线</u>
<del>del删除线</del>
<s>s删除线</s>

TIp:以上均为双标签

div和span

div和span没有任何语义,就是个盒子,用来装内容的,双标签。
特点:div常用来布局,且独占一行,span一行显示很多内容

图像标签

<img>:使用该标签在页面中插入图片,单标签

<img src="图像路径/图像名.图像后缀"/>

src为img标签的属性,必填;除了这个,还有alt等
绝对路径和相对路径
绝对路径是从分区标识符开始进行定位到文件的路径叫绝对路径。
相对路径是指相对于当前操作文件所在位置开始定位到对应一个文件的路径叫相对路径,其中,..为上一级文件夹。.为当前文件夹。
不管目录是什么,每一级目录都使用/分隔,文件要写后缀。

超链接标签<a>

双标签,

<a href="https://www.baidu.com">asdfasd</a>

href:必填,用于指定目标连接的url,外部链接必须以http://或者https://
target:用于确定是在当前页面(_self)打开还是以新标签页(_blank)打开,
内部链接:遵循相对路径和绝对路径的规则
空链接:使用#代替链接
下载链接:当链接里面存在的是一个带有后缀的文件,这个链接就是一个下载链接,压缩包文件较多
网页元素链接:网页中的各种元素,比如文本,图像,表格,音频,视频都可以添加超链接
锚点链接:用于定位当前页面的某个位置;在href中,以# + 字符的形式,字符根据你所引用标签设置的id=""双引号中的字符一致

注释与特殊字符

注释:<!– 注释内容 –>不会显示在页面上,只做程序标注提示使用。
特殊字符:&nbsp;一个空格;&gt;大于号> &lt;小于号<

表格标签

表格的作用:显示展示数据
基本语法:<table><tr><td>(均为双标签),其中
<table>为整个表,也就是包含单元格的框架
<tr>为整个表中的行,在这里面包含了一行上的虽有单元格
<td>为一个单元格,内容就在双标签之间填写即可

<table>
    <tr>
        <td>asdfasdf</td>
        <td>asdfasdfasdf</td>
        <td>asdfasdf</td>
    </tr>
    <tr>
        <td>asdfasdf</td>
        <td>sadfasdfasd</td>
        <td>asdfasdfasd</td>
    </tr>
</table>

表头单元格标签<th></th>:
th中的数据会自动加粗居中
表格标签相关属性(后期会通过css进行装饰):

属性名 属性值 描述
algin left、center、right 单元格内数据的对齐方式
broder “数字”或”” 显示边框和控制外边框粗细,默认为””,数字越大,整个表格的外边框的笔触也会越粗
cellpadding 像素值 单元格内数据与单元格的距离,默认为1像素
cellspacing 像素值 单元格之间的距离与外边框的距离,默认为两像素
width\hight 像素值或百分比 表格宽度\表格高度

表格结构标签:

thead表示表格的头部区域,tbody表示表格的主题区域,均为双标签
合并单元格:
纵向合并:rowspan=”欲合并个数”
横向合并:colspan=”欲合并个数”
目标单元格:纵向合并,将属性规定在最上面单元格的开头标签中;横向合并,将属性规定在最左侧的单元格的开头标签中。

<table>
    <thead>
        <tr>
            <th>asdf</th>
            <th>asdf</th>
            <th>asdf</th>
            <th>asdf</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">asdf</td>
            <td>asdf</td>
            <td>asdf</td>
            <td>asdf</td>
        </tr>
        <tr>
            <td>asdf</td>
            <td>asdf</td>
            <td>asdf</td>
        </tr>
        <tr>
            <td>asdf</td>
            <td>asdf</td>
            <td>asdf</td>
            <td>asdf</td>
        </tr>
        <tr>
            <td>asdf</td>
            <td>asdf</td>
            <td colspan="2">asdf</td>
        </tr>
    </tbody>
</table>
asdf asdf asdf asdf
asdf asdf asdf asdf
asdf asdf asdf
asdf asdf asdf asdf
asdf asdf asdf

列表标签

列表用于项目布局。

无序列表:

ul定义无序列表,用li来定义标签

<ul>
    <li>111111</li>
    <li>222222</li>
    <li>333333</li>
</ul>

1,无序列表没有顺序
2,ul中不允许放除li标签以外的所有元素或字符
3,li标签中间可以加所有元素和字符
4,无序列表有自己的样式属性,可以通过css进行定制

有序列表:

ol定义有序列表,用li来定义标签

<ol>
    <li>111111</li>
    <li>222222</li>
    <li>333333</li>
</ol>

1,有序列表是由一定顺序的,不能颠倒。
2,ul中不允许放除li标签以外的所有元素或字符
3,li标签中间可以加所有元素和字符
4,无序列表有自己的样式属性,可以通过css进行定制

自定义列表:

自定义列表项前没有项目符号;dl来定义自定义列表,列表标题使用dt,当前标题下的项用dd。

<dl>                 <!-- 使用dl定义一个自定义列表 -->
    <dt>111111</dt>  <!-- 使用dt定义每一个列表的列表标题 -->
    <dd>222222</dd>  <!-- 使用dd定义每一个列表的列表项 -->
    <dd>333333</dd>
</dl>

1,自定义列表没有顺序
2,dl中不允许放除dd和dt标签以外的所有元素或字符;先后顺序dt在前,dd在后。
3,dd标签中间可以加所有元素和字符
4,自定义列表有自己的样式属性,可以通过css进行定制

表单标签

表单包含表单域,表单控件和提示信息

表单域

包含表单元素的区域
form双标签来规范表单域范围

属性名 属性值 作用
action url地址 指定接收处理表单数据的服务器程序url地址
method get/post 设置表单数据提交方式
name 字符 用于指定表单名称,区分多个表单

表单控件:

input文本框标签:<input type=””/>单标签
type属性的值

属性值 描述
button 定义按钮,用于启动js脚本
checbox 定义复选框
file 定义输入字段和“浏览”按钮,用于文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码输入样式
radio 单选按钮,若想实现单选,需配合name属性值为同一个值时才可实现
reset 重置按钮,清空表单中的数据
submit 定义提交按钮,配合form的method属性会把数据传递到后端进行相应处理
text 可输入文本框

其他属性

属性名 属性值 描述
name 用户自定义 定义input名称
value 用户自定义 规定input默认值,主要用于后台数据处理
checked checked 加载后是否为选中状态
maxlenght 正整数 规定最大长度

lable标签

用于绑定一个表单元素,当点击label标签内的文字时,浏览器就会自动将焦点(光标)转到或者选择对应饿表单元素上,用来增加用户体验。配合标签的id属性进行搭配使用
语法:

<label for="xingbie"></lable>
<input type="radio" name="sex" id="xingbie"/>
<!-- 上面是显性写法,下面的是隐性写法 -->
<label>hhhhhhhh<input type="radio"></label>

select标签

下拉列表,用于某类的集合,节约页面空间;使用<select>双标签定义下拉列表,在其内敲双标签<option>写入预选选项
1.至少有一对option
2.在option中定义selected=”selected”时,当前项即为默认选中状态。

请在下面的选项中选出哪一个与其他几个不同:<select name="" id="">
    <option value="">张家口</option>
    <option value="">张震岳</option>
    <option value="">张国立</option>
    <option value="">张一么西喽</option>
</select>

textarea标签(双标签)

文本域,多行文本框。
cols属性:规定显示多少个字符
ross属性:规定默认显示几行


(未完待续……)


更多内容:


文章作者: 浮燃
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 浮燃 !
  目录