狂神说HTML5+CSS笔记
HTML
HTML：Hyper Text Markup Language（超⽂本标记语⾔）
HTML 5 + CSS 3
W3C：World Wide Web Consortium（万维⽹联盟）
W3C标准包括：结构化标准语⾔（HTML、XML配置⽂件）、表现语⾔标准（CSS）、⾏为标准（DOM⽂档对象模型、ECMAScript）标签
基础标签
<!--告诉浏览器，要使⽤什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--⽹页头部-->
<head>
<!--描述标签，⽤来描述⽹站的⼀些信息。（⼀般⽤来做SEO：Search Engine Optimization 搜索引擎优化）--> <meta charset="UTF-8">
<meta name="keywords"content="关键词">
<meta name="description"content="内容描述">
<!--⽹页标签-->
<title>Title</title>
</head>
<!--⽹页主体-->
<body>
<!--标题标签-->
<h1>⼀级标签</h1>
<h2>⼆级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>⽂本1</p>
<p>⽂本2</p>
<!--⽔平线标签-->
<hr/>
<!--换⾏标签-->
⽂本1；<br/>
⽂本2；<br/>
<!--粗体、斜体-->
粗体：<strong>i love *</strong><br/>
斜体：<em>i love *</em>
<!--特殊符号（&+⾸字母 / 百度转义字符）-->
空格
空   ；格<br/>
⼤于号><br/>
⼩于号<<br/>
版权符号©<br/>
</body>
</html>
图⽚标签
常见图⽚格式：JPG、GIF、PNG、BMP…
<body>
<!--
src：图⽚地址（相对路径、绝对路径）（../  --上⼀级⽬录）
alt：图⽚未加载出显⽰的⽂字（必填）
width 和 height 会等⽐缩放
-->
<img src="../resource/image/1.jpg"alt="图⽚"title="⿏标悬停显⽰⽂字"width="300"height="200">
</body>
链接标签
<body>
<!--a标签
herf：跳转到的页⾯（必填）
target：表⽰窗⼝在哪⾥打开
_blank：在新页⾯打开
_self：在⾃⼰页⾯打开
-->
<a href="1.第⼀个html.html"target="_blank">第⼀个页⾯</a>
<a href="baidu"target="_self">百度</a>
<br/>
<a href="baidu"title="图像超链接">
<img src="../resource/image/1.jpg"alt="图⽚"width="200"height="200">
</a>
</body>
锚链接
<!--2.图像链接.html-->
<body>
<a href="3.链接标签.html#down">跳转到3.链接标签.html页⾯底部</a>
</body>
<!--3.链接标签.html-->
<body>
<!--使⽤name作为标记，实现锚链接（name：弃⽤的HTML属性）-->
<a name="top">顶部</a>
<p><a href="baidu"title="图像超链接">
<img src="../resource/image/1.jpg"alt="图⽚">
</a></p>
<p><a href="baidu"title="图像超链接">
<img src="../resource/image/1.jpg"alt="图⽚">
</a></p>
<!--锚链接
1、需要⼀个锚标记
2、跳转到标记
-->
<a href="#top">回到顶部</a>
<a name="down">底部</a>
</body>
功能性链接
<a href="mailto:666@qq">邮箱链接：malito</a>
块元素和⾏内元素
块元素：⽆论内容多少，独占⼀⾏（p、h1-h6 …）
⾏内元素：内容撑开宽度，左右都是⾏内元素可以排在⼀⾏（a、strong、em …）列表标签
<ol>
<li>java</li>
<li>qw</li>
<li>qwea</li>
</ol><hr>
<!--⽆序列表，⽤于导航、侧边栏等-->
<ul>
<li>xzc</li>
<li>dasd</li>
<li>asd</li>
</ul>
<!--⾃定义列表，⽤于⽹页底部等-->
<dl><!--标签-->
<dt>数字</dt><!--列表名称-->
<dd>1</dd><!--列表内容-->
<dd>2</dd>
<dt>字母</dt>
<dd>a</dd>
<dd>b</dd>
</dl>
表格标签
<table border="20px"><!--表格标签-->
<tr><!--⾏-->
<!--colspan 跨列-->
<td colspan="2">1-1</td><!--列-->
<td rowspan="2">1-2</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
</tr>
<tr>
<td colspan="2">3-1</td>
</tr>
</table>
媒体元素
<!--视频
src：资源路径html和css书籍推荐
controls：控制条
autoplay：⾃动播放（Chrome浏览器取消了⾃动播放）
-->
<video src="../resource/video/视频1.mp4"controls autoplay></video> <!--⾳频-->
<audio src="../resource/audio/猴叫.mp3"controls></audio>
其他内容
页⾯结构
header：标题头部区域的内容(⽤于页⾯或页⾯中的⼀块区域) footer：标记脚部区域的内容(⽤于整个页⾯或页⾯的⼀块区域) section：Web页⾯中的⼀块独⽴区域
article：独⽴的⽂章内容
aside：相关内容或应⽤（常⽤于侧边栏)
nav：导航类辅助内容
内联框架
<!--iframe 内联框架
src：地址
frameborder：帧边缘
w-h：宽度⾼度
-->
<iframe src="baidu"frameborder="0"height="500"width="700"></iframe>
<iframe src=""name="hello"height="500"width="700"></iframe>
<a href="4.列表.html"target="hello">内联框架</a>
表单post、get提交
<h1>注册</h1>
<!--form标签
action：表单提交位置，可以是⽹站，也可以是⼀个请求处理地址
method：提交⽅式（get/post）
get中可在url地址中看到提交的信息，不安全，但⾼效
post⽐较安全，可传输⼤⽂件
-->
<form action="1.第⼀个html.html"method="post">
<!--⽂本输⼊框：input type="text"-->
<p>名字：<input type="text"name="username"></p>
<!--密码框：input type="password"-->
<p>密码：<input type="password"name="password"></p>
<input type="submit">
<input type="reset">
</form>
表单
<h1>注册</h1>
<!--form标签
action：表单提交位置，可以是⽹站，也可以是⼀个请求处理地址
method：提交⽅式（get/post）
get中可在url地址中看到提交的信息，不安全，但⾼效
post⽐较安全，可传输⼤⽂件get
-->
<form action="1.第⼀个html.html"method="get">
<!--⽂本输⼊框（input中的name属性必须要加，提交起到键值对的键的作⽤）
value="默认值"      默认值
maxlength="8"      做多输⼊的字符
size="30"          ⽂本框长度
-->
<p>名字：<input type="text"name="username"value="admin"maxlength="8"size="30"readonly disable></p> <!--密码框：input type="password"-->
<p>密码：<input type="password"name="password"/></p>
<!--单选框标签
value：单选框的值
name：表⽰组-->
<p>性别：
<input type="radio"value="boy"name="sex"/>男
<input type="radio"value="girl"name="sex"/>⼥
</p>
<!--多选框
checked：默认勾选内容-->
<p>爱好：
<input type="checkbox"value="sleep"name="hobby">睡觉
<input type="checkbox"value="code"name="hobby">代码
<input type="checkbox"value="chat"name="hobby"checked>聊天
<input type="checkbox"value="game"name="hobby">游戏
</p>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。