目录
HTML
主要负责搭建页面结构和内容
主要学习的就是HTML内部有哪些标签,标签有哪些属性,标签和标签的嵌套关系
结构介绍
<!DOCTYPE html><!-- 以h5的标准,解析页面 -->
<html><!-- 根标签 -->
<head><!-- 头标签:里面的内容是给浏览器看的 -->
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body><!-- 体标签:里面的内容是给用户看的 --></body>
</html>
常见的文本标签
1. 内容标题: h1-h6
独占一行,字体加粗,自带上下间距
2. 段落标签: p
独占一行,自带上下间距
3. 加粗和斜体
<b> <i>
图片标签
- src 路径
1. 相对路径: 访问站内资源时使用
a. 同目录: 直接写图片名
b. 上级目录: ../图片名
c. 下级目录: 文件夹名/图片名
2. 绝对路径: 访问站外资源时使用(图片盗链)
以http开头, 好处:节省本站资源 坏处: 可能找不到图片
- alt: 当图片不能正常显示时显示的文本
- title: 鼠标悬停时显示的文本
- width/height: 1. 像素 2. 百分比
超链接标签
href: 路径(可以指向站内,也可以指向站外) , 可以指向页面资源和文件资源(浏览器支持浏览则浏览不支持则下载)
- 图片超链接: 用a标签把img标签包裹后 就是图片超链接<a href="xxxx"><img src="xxxx"></a>
列表标签
无序列表
<ul type="square"><!-- unordered list 无序列表 -->
<li>刘备</li><!-- list item 列表项 -->
<li>孙尚香</li>
<li>妲己</li>
<li>刘禅</li>
<li>韩信</li>
</ul>
有序列表
<ol type="1" start="10" reversed="reversed"><!-- ordered list 有序列表 -->
<li>打开冰箱门</li>
<li>大象装进去</li>
<li>关上冰箱门</li>
<li>关上冰箱门</li>
<li>关上冰箱门</li>
<li>关上冰箱门</li>
</ol>
定义列表
<dl><!-- 定义列表 -->
<dt>凉菜</dt> <!-- 定义术语(标题) -->
<dd>拍黄瓜</dd> <!-- 定义描述 -->
<dd>芥末鸭掌</dd>
<dd>花毛一体</dd>
<dt>热菜</dt>
<dd>宫保鸡丁</dd>
<dd>水煮鱼</dd>
<dd>酱烧排骨</dd>
</dl>
列表嵌套
有序和无序 可以任意无限嵌套
<ul>
<li>河北
<ol>
<li>aaa
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</li>
<li>河南</li>
<li>山东</li>
</ul>
分区标签
标签自身没有任何显示效果
- 用于将多个相关的标签进行统一管理
- div默认独占一行
- 一个页面至少分为三大区 头 体 尾(脚)
<div>头</div>
<div>体</div>
<div>尾(脚)</div>
- 为了提高代码的可读性,html5中 新增了几个分区标签,作用和div一样
1. header 头
2. footer 脚
3. article 文章/正文
4. section 块/区域
5. nav 导航
<header>头</header>
<article>体</article>或<section>体</section>
<footer>脚</footer>
表单
主要学习的就是表单中有哪些控件:文本框/密码框/单选/多选/下拉选/日期选择器/文件选择器等
作用:用于获取用户输入的各种信息,并且信息提交到服务器.
<!-- 所有控件 必须有一个name属性
不然用户写的信息不会提交 -->
<form action="http://www.tmooc.cn">
<!-- value设置默认值
placeholder 占位文本 -->
用户名:<input type="text" name="username"
value="hehe" placeholder="请输入用户名"><br>
密码:<input type="password" name="pw"
placeholder="请输入密码"><br>
<!-- 单选中的value控制提交内容
checked默认选中 -->
性别:<input type="radio" name="gender"
value="m">男
<input type="radio" name="gender"
value="w" checked="checked">女<br>
爱好:<input type="checkbox" name="hobby" value="cy">抽烟
<input type="checkbox" name="hobby" value="hj">喝酒
<input type="checkbox" checked="checked"
name="hobby" value="tt">烫头<br>
生日:<input type="date" name="birthday"><br>
<input type="submit" value="注册">
</form>
表格
子标签
- tr(table row 表格的行)
- td(table data 表格的列)
- th(table head表头,加粗并居中)
- caption表格标题
属性
border边框
cellspacing单元格之间的间距
rowspan跨行
colspan跨列