HTML

最新推荐文章于 2024-07-15 13:12:20 发布

一条自学的python狗

最新推荐文章于 2024-07-15 13:12:20 发布

阅读量166

点赞数

分类专栏： web原理与应用文章标签： html

本文链接：https://blog.csdn.net/qq_45883412/article/details/106013345

版权

web原理与应用专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML语法规范

1. HTML标签

1.1. <!DOCTYPE>文档类型声明标签，告诉浏览器HTML的版本

必须是第一行
<!DOCTYPE html>HTML5版本

1.2. lang语言种类

en 英语
zh-CN中文

1.3. 字符集

<meta charset="UTF-8">

常用标签
标签的语义
使结构更加清晰

1.4. 标题标签

<h1>-<h6>
<h1>标题</h1>
标题一行显示

1.5. 段落标签

<p></p>
将内容分成段落
段落前后会缝隙
文本的大小会根据浏览器窗口自动换行

1.6. 换行标签

<br />
强制换行

课堂案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>新闻标题</h1>
    <h4>小标题</h4>
    <p>内容</p>
    <h4>小标题</h4>
    <p>内容</p>
    <p>作者：111<br/>233
    </p>
</body>
</html>

1.7. 文本的格式化标签

1.7.1. 加粗标签

<strong></strong>
<b></b>

1.7.2. 倾斜标签

<em></em>
<i></i>

1.7.3. 删除线

<del></edl>
<s></s>

1.7.4. 下划线

<ins></ins>
<u></u>

1.8. div标签span标签

没有语义充当盒子，用来装内容
div独占一行
span一行可以放置多个span

1.9. 图像标签

<img src="图像的URL">
src属性说明图片的路径（必须有）
alt当图片无法显示，替换文本
title提示文本，鼠标放在图片上的出现的提示文字
width图片的宽度
height图片的高度
说明一个就可以等比例缩放
border图像设定边框（通过css设定）
注意点：
属性不分先后
属性之间要加空格
属性=“属性值”

1.10. 路径

1.10.1. 相对路径

同一级直接写文件名字
上级路径 …/
下一级路径 /

1.10.2. 绝对路径

盘符\
网络链接

1.11. 超链接

<a></a>
href目标地址
target打开窗口的方式 _self当前页面(默认) _blank新窗口

1.12. 链接分类

外部链接： <a href="http://www.qq.com">腾讯</a>
内部链接：<a href="index.html">首页</a>
空链接：<a href="#">
下载链接：<a href="123.zip">地址链接的是文件 .exe .zip
网络元素链接：<a href="123.html"><img src="233.jpg"></a>
锚点链接：快速定位到某个位置

<a href="#name">h1</a>



<h1 id="name">h1<h1>

1.13. 注释

1.14. 特殊字符

空格 &nbsp
< &lt
> &gt

综合案例

1.15. 表格标签

1.15.1. 主要作用

展示数据

1.15.2. 基本语法

<table></table>定义表格
<tr></tr>行
<td></td>单元格
<th></th>表头单元格（居中、加粗）
<thead></thead>
<tbody></tbody>

1.15.3. 表格属性（用css）

在table标签里面
align：center left right表格对齐方式
border：边框，默认空
cellpadding：内容与单元格之间的距离，默认1
cellspacing：单元格之间的距离，默认2
width
height

1.15.4. 合并单元格

跨行：rowspan，最上侧目标单元格
跨列：colspan，最左侧目标单元格

1.16. 列表标签

布局页面

1.16.1. 无序列表

没有顺序

<ul>
    <li></li>
    <li></li>
</ul>

<ul>只能放<li>标签
<li>可以放任何元素
样式用css修改

1.16.2. 有序列表

有顺序

<ol>
    <li></li>
</ol>

<ol>只能放<li>标签
<li>可以放任何元素
样式用css修改

1.16.3. 自定义列表

<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
</dl>

<dl>只能放<dt> <dd>
<dt> <dd>并列相同

1.17. 表单标签

收集用户信息
组成：
表单域
表单控件（表单元素）
提示信息
注册页面

1.17.1. 表单域

收集信息，提交给服务器
<form action="demo.php" method="POST" name=""></form>

1.17.2. 表单元素

1.17.2.1. `<input>`输入表单元素

<input type="" />

1.17.2.1.1. 属性

type：
text 文本框
password 密码框（看不见密码）
radio 单选按钮（单选按钮的name必须相同，已实现单选译）
checkbox 复选框（多选框的name必须相同）
submit 提交按钮（发送表单域到服务器）通过value修改按钮里面的内容
reset 重置按钮通过value修改按钮里面的内容
button 可以点击的按钮（常与js连用）通过value修改按钮里面的内容
file 上传文件
name：名字
value：默认的值（只能在文本框显示，为后台使用）
checked：checked 单选和多选可以设置默认选项
maxlength：文本输入最大长度
<label>标签（增加用户体验）

<label for="text">用户<label>
<input type="text" id="text" />

for与id相同

1.17.2.2. `<select>`下拉表单

<select>
<option selected="selected">选项1<option><!--默认选定状态-->
</select>

1.17.2.3. `<textarea>`文本域标签

<textarea cols="一行的字数" rows="行数"></textarea>用css定义样式