目录
1.注释标签
2.标题标签:h1-h6
3.段落标签
4.换行标签
5.转义字符
6.格式化标签
7.图片标签:img
8.超链接便签:a
9.表格标签
10.列表标签
11.表单标签
12.无语义标签:div&span
1.注释标签
<!-- 我是注释 -->ctrl+/快捷键可以快速进行注释/取消注释
2.标题标签:h1-h6
有六个, 从 h1 - h6. 数字越大, 则字体越小.
输入标签名+tab,会自动生成
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
3.段落标签
<p>第一段落</p>
<p>第二段落</p>
4.换行标签
<br/>br 是 break 的缩写. 表示换行.
- br 是一个单标签(不需要结束标签)
- br 标签不像 p 标签那样带有一个很大的空隙.
是规范写法. 不建议写成
5.转义字符
空格:  
小于号: <
大于号: >
按位与: &
6.格式化标签
- 加粗: strong 标签 和 b 标签
- 倾斜: em 标签 和 i 标签
- 删除线: del 标签 和 s 标签
- 下划线: ins 标签 和 u 标签
<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>
7.图片标签:img
img是单标签
img中可以写很多属性,最重要的是src属性
通过src描述图片所在位置,src可以是绝对路径/相对路径/网络路径
//相对路径
<img src="Evan.jpg" alt="">
//绝对路径
<img src="D:\D桌面\gitee\Evan.jpg" alt="">
//网络路径
<img src="http://up.deskcity.org/pic_source/2f/f4/42/2ff442798331f6cc6005098766304e39.jpg" alt=""> img 标签的其他属性
- alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
- title: 提示文本. 鼠标放到图片上, 就会有提示.
- width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
- border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.
像素越多,显示效果越好
注意:
1. 属性可以有多个, 不能写到标签之前
2. 属性之间用空格分割, 可以是多个空格, 也可以是换行.
3. 属性之间不分先后顺序
4. 属性使用 "键值对" 的格式来表示.
8.超链接便签:a
- href: 必须具备, 表示点击后会跳转到哪个页面.
- target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.
<a href="http://www.baidu.com">百度</a>链接的几种形式:
- 外部链接: href 引用其他网站的地址
<a href="https://www.runoob.com/cprogramming/c-function-fgetc.html">这是超链接</a>- 内部链接: 网站内部页面之间的链接. 写相对路径即可.
<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>- 空链接: 使用 # 在 href 中占位.
<a href="#">空链接</a>- 下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)
<a href="Test.zip">下载链接</a>- 网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)
点击图片跳转链接
<a href="http://www.sogou.com">
<img src="1.jpg" alt="">
</a>9.表格标签
基本使用
- table 标签: 表示整个表格
- tr: 表示表格的一行
- td: 表示一个单元格
- th: 表示表头单元格. 会居中加粗
table 包含 tr , tr 包含 td 或者 th.
<table>
<tr>
<td>张三</td>
<td>01</td>
</tr>
<tr>
<td>李四</td>
<td>02</td>
</tr>
</table>10.列表标签
- 无序列表[重要] ul li , .
- 有序列表[用的不多] ol li
- 自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明)
<h3>无序列表</h3>
<ul>
<li>cat</li>
<li>dog</li>
<li>duck</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>cat</li>
<li>dog</li>
<li>duck</li>
</ol>
<h3>自定义列表</h3>
<ol>
<dt>动物</dt>
<dd>cat</dd>
<dd>dog</dd>
<dd>duck</dd>
</ol>
11.表单标签
表单是让用户输入信息的重要途径.
分成两个部分:
- 表单域: 包含表单元素的区域. 重点是 form 标签.
- 表单控件: 输入框, 提交按钮等. 重点是 input 标签.
form 标签
描述了要把数据按照什么方式, 提交到哪个页面中. 可以放和用户交互的组件
input标签
1.单选框(只能选一个)
<form>
<input type="text">
<input type="password">
<input type="radio" name="gender">男
<input type="radio" name="gender" checked="checked">女
</form>
label 标签
搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.
for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)
<input type="radio" name="gender" id="male">
<label for="male">男</label>
<input type="radio" name="gender" checked="checked" id="female">
<label for="female">女</label>
2.复选框
想选几个选几个
<form>
<input type="checkbox">吃饭
<input type="checkbox">睡觉
<input type="checkbox">上课
</form>3.普通按钮
<input type="button" value="这是按钮" onclick="alert('hello')">
<button onclick="alert('hello')">这是按钮</button>两行效果相同
value是按钮上的文字,onclick点击元素触发,内容是""中的代码,会直接被浏览器执行,alert是弹出对话框
4. 选择文件
点击选择文件, 会弹出对话框, 选择文件
<input type="file">select标签-->下拉菜单
<form>
<section>
<option >--选择年份--</option>
<option >2000</option>
<option >2001</option>
<option >2002</option>
<option >2003</option>
<option >2004</option>
</section>
</form>
option 中定义 selected="selected" 表示默认选中.
textarea 标签
多行编辑
<textarea cols="30" rows="10">
</textarea>
12.无语义标签:div&span
div:独占一行,块级单元
span:不独占一行,行内元素
<div>
<span>cat</span>
<span>cat</span>
<span>cat</span>
</div>
<div>
<span>dog</span>
<span>dog</span>
<span>dog</span>
</div>
<div>
<span>duck</span>
<span>duck</span>
<span>duck</span>
</div>
