文章目录
一、HTML语法规范
- 标签在<>内，并且成对出现（通常），称为双标签。
<html></html>
- < br />单标签。有些特殊的标签必须是单标签
- 标签关系有包含关系和并列关系
【包含关系】
<head>
<title></title>
</head>
【并列关系】
<head></head>
<body></body>
二、HTML基本结构标签
- HTML标签
是页面中最大的标签，称为根标签。
<html></html>
- 文档的头部
注意在head标签中我们必须要设置的标签是title
<head></head>
- 文档的标题
让页面拥有一个属于自己的网页标题
<title></title>
- 文档的主体
元素包含文档的所有内容，页面内容基本都是放到body里面的
<body></body>
- 具体格式如下
<html>
<head>
<title>第一个页面</title>
</head>
<body>
巴拉巴拉
</body>
</html>
三、开发工具
笔者采用的开发工具是VScode，如后面学会了其他的开发工具，也会发表相关经验帖。
一般操作：
- 双击打开软件
- 新建文件(Ctrl+N)
- 保存（Ctrl+S），注意一定要保存为.html文件
- Ctrl+放大，Ctrl-缩小
- 输入！，按下tab键，会生成页面骨架结构
- 点击右键，点击“open in default browser”，会在默认浏览器打开写好的HTML文档。点“open in other browser”，会在其他浏览器中打开
- 推荐安装的插件
| 插件 | 作用 |
|---|---|
| Chinese | 中文（简体）语言包 |
| Open in Browser | 右击选择浏览器打开HTML文件 |
| Auto Rename Tag | 自动重命名配对的HTML/XML标签 |
四、标题标签、段落和换行标签
- 标题标签
分为六个等级：< h1>-< h6>，加了标题的文字会变得更粗、更大，一个标题独占一行。
如：
<h1>我是一级标题</h1>
- 段落和换行标签
<p>我是一个段落标签</p>
特点：文本根据浏览器大小自动换行；段落与段落之间有较大空隙
强制某文本进行换行<br />
特点：它是单标签；只是另起一行，行与行之间距离不大
五、文本格式化标签（后面CSS也会有文本格式化，这里有一个了解）
| 效果 | 表示方式 |
|---|---|
| 加粗 | < strong>< /strong>或< b>< /b> |
| 倾斜 | < em>< /em>或< i>< /i> |
| 删除线 | < del>< /del>或< s>< /s> |
| 下划线 | < ins>< /ins>或< u>< /u> |
六、div和span标签
<div>这是头部</div>
<span>今日价格</span>
特点：div标签用来布局，一行只能放一个div，span一行能放好多个
七、图像标签
<img src="图像URL" />
src是必须属性，用来指定文件名和路径
其他属性：
| 属性名 | 功能 |
|---|---|
| alt | 替换文本，图像显示不出时用文字替换 |
| title | 提示文本，鼠标放在图片上显示的文本信息 |
| width | 填像素，设置宽度 |
| height | 填像素，设置高度 |
| border（一般用CSS做） | 填像素，设置边框粗细 |
注意:
- 可以有多个属性，属性写在标签名后
- 属性和属性之间不分先后，均以空格分开
- 属性采取键值对的格式，即：属性=“属性值”
八、路径的基本知识
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。
同一级相对路径<img src="baidu.gif"/>
下一级相对路径<img src="images/baidu.gif"/>
上一级相对路径<img src="../baidu.gif"/>
绝对路径：指目录下的绝对位置，直接到达目标位置。通常是从盘符开始的路径。
例如：“D:\web\img\logo.gif” 或 “www.baidu.com”
<img src="C:\User\apple\Desktop\前端第一天\案例\img.jpg" />
上面的这种一般在固定电脑才行，所以很少用
九、超链接标签*（重点）
在HTML标签中，< a>标签用于定义超链接，作用是从一个页面链接到另一个页面
1、语法格式
<a href="跳转目标" targrt="目标窗口的弹出方式">文本或图像</a>
- href是必须属性，用于指定链接目标的URL地址，当为标签应用了href属性时，它就具有了超链接功能
- target用于指定链接页面的打开方式。其中-self为默认值，即在当前窗口中打开，-blank为在新窗口中打开
2、链接分类
（1）外部链接
去往外部网站
<a href="http://www.qq.com">腾讯</a>
（2）内部链接
网站内部页面之间的相互链接，在同一个文件夹中直接用名字，不在则用相对路径描述法描述一下。
<a href="index.html">首页</a>
（3）空链接
<a href="#">公司地址</a>
整一个占位符相当于是
（4）下载链接
如果href里面地址是一个文件或者压缩包，会下载这个文件。
<a href="img.zip">下载文件</a>
（5）网页元素链接
在网页中各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
<a href="http://www.baidu.com"><img src="img.jpg"/></a>
（6）锚点链接
当我点击链接，可以快速定位到页面中的某个位置
<a href="#two">第二集</a>
巴拉巴拉
<h3 id="two">第二集介绍</h3>
找到的那个元素的标签的id属性值要设置成href那里#后面一样的名字。
十、表格标签
表格的主要作用：显示、展示数据
1、主要作用和基本语法
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
< table>定义表格
< tr>定义表格中的行
< td>定义单元格
< th> < /th>表头单元格标签，会加粗并居中，表头单元格也是单元格
2、表格属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| aligh | left(默认)、center、right | 对齐方式 |
| border | 1或"" | 规定是否有边框，默认为""，即无 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值，如果为0相当于无缝隙 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格宽度 |
| height | 像素值 | 高度 |
3、表格结构标签
<table>
<thead>
<tr>
<th></th>
<tr>
</thead>
<tbody>
<tr>
<td></td>
...
</tr>
...
</tbody>
</table>
< thead>标签表示表格的头部区域，内部必有< tr>，一般放在第一行
< tbody>标签表示表格的主体区域
4、合并单元格
-
合并单元格的方式：跨行合并、跨列合并
跨行：rowspan=“合并单元格的个数”
跨列：colspan=“合并单元格的个数” -
目标单元格：
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码
<td colspan="2"></td>
合并之后删除多余单元格，不要乱删
十一、列表标签
1、无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
注意：
- 各个小li之间无顺序，是并列的
- < ul>中只能嵌套< li>，放其他标签和文字都不允许
- < li>与< /li>之间相当于一个容器，可以容纳任何元素
- 无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置
2、有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
注意：
- < ol>只能放< li>
- < li>可以放所有
- 有序列表带样式属性，但我们会用CSS设置
3、自定义列表
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dl>
自定义列表常用于对术语和名词经行解释和描述
< dl>定义自定义列表，< dt>定义项目/名字，< dd>描述每一个项目/名字
注意：
- < dl>只能包含< dt>或者< dd>
- < dt> 与< dd>个数不限制，通常一个< dt>对应多个< dd>
- < dt>和< dd>可以放任何标签
十二、表单标签
使用表单是为了收集用户信息
1、表单域
< form>定义表单域，能把它范围内的表单元素信息提交给服务器
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
...
</form>
常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 设置提交方式 |
| name | 名称 | 指定表单的名称 |
2、表单控件（表单元素）
| 名称 | 类型 |
|---|---|
| input | 输入表单元素 |
| select | 下拉表单元素 |
| textarea | 文本域元素 |
<input type="属性值"/>
input是一个单标签，type属性不同可以用来指定不同的控件类型。
type属性值及其描述
| 属性值 | 描述 |
|---|---|
| button | 可点击按钮(用于通过JS启动脚本，与JS搭配使用) |
| checkbox | 复选框(小方框，可多选，要设置成相同的名字) |
| file | 输入字段和“浏览按钮”，供文件上传 |
| hidden | 隐藏的输入字段 |
| image | 图像形式的提交按钮 |
| password | 定义密码字段，该字段中的字符被掩码 |
| radio | 单选按钮(小圆按钮，多选一) |
| reset | 重置按钮，会清除表单中的所有数据 |
| submit | 提交按钮，将表单数据发送给服务器 |
| text | 用户输入文本，默认宽度20 |
input的其他属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 用户自定义 | 定义input元素名称，用于区别不同的表单元素 |
| value | 用户自定义 | 规定input元素值 |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字符的最大长度 |
<input type="text" name="username" value="请输入用户名">
注意：
- name和value是每个表单元素都有的属性值，主要给后台人员使用
- name是表单元素的名字，要求单选按钮和复选框都要有相同的name值
- checked属性主要针对于单选按钮和复选框
3、label标签
用于绑定一个表单元素，当点击< label>标签内的文本时，浏览器会自动将焦点（光标）转到或选择对应的表单元素上，用来增加用户的体验。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>
要建立连接，上面的for和下面的id要是相同的
4、select下拉表单元素
当有多个选项让用户选择，并且想要节约页面空间
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
注意：
- < select>中至少包含一对< option>
- 在< option>中定义 selected="selected"时，当前项即为默认选中项
5、textarea文本域元素
< textarea>用于定义多行文本输入，常见于留言板、评论、反馈
<textarea rows="3" cols="20">
文本内容#写什么，页面一打开就会显示什么，不放多余空格就不会显示多余空格
</textarea>
这个代码表示可以显示3行，每行显示20个字符，超出范围会显示滚动条
十三、查阅文档
| 名称 | 网址 |
|---|---|
| 百度 | www.baidu.com |
| W3C | www.w3school.com |
| MDN | https://developer.mozilla.org/zh-CN/ |
464
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
