为了写页面硬着头皮上HTML，一切从0开始，但愿我能OK!
html5.jpg
【文本样式】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 600px;
/*字体大小*/
font-size: 14px;
/*字体*/
font-family: "microsoft YaHei";
/*字体颜色，这个地方结尾带分号就有值错误*/
color:red;
/*行高*/
line-height:20px;
/*文本对齐方式 right-center-left*/
text-align: left;
/*首行缩进2em/20px*/
text-indent: 2em;
/*文本着重 normal bold bolder 100-900*/
font-weight: bold;
/*文字倾斜 normal italic oblique*/
font-style: oblique;
/*文本修饰 none underline overline line-through*/
text-decoration:underline ;
/*字母间距 具体数值*/
letter-spacing: 2px;
/*单词间距 空格为解析单位*/
word-spacing:10px;
}
em{
font-size: 14px;
font-family: "Arial";
color:green;
line-height: 16px;
}
a {
font-size: 14px;
word-spacing: 20px;
}
</style>
</head>
<body>
<div>喜欢养狗狗，但又觉得叫声烦人又扰民，于是直接把狗狗的声带切掉了，在人的私欲面前，一个宠物算什么？近日，在成都青白江花鸟市场内的狗市区域，</div>
<!-- em标签中都是倾斜的 -->
<em>一位中年男子拉开了一张桌子，当街做起了狗狗声带切除手术，生意颇为火爆。网友将图片上传网络之后，引发不小争议</em>
<br>
<a>i miss you</a>
</body>
</html>
【常见标签】
1.title标签
<title>...</title>
2.div标签
<div>...</div>
3.h标签
<h>...</h>
默认样式：fon-size font-weight margin
4.p标签
<p>...</p>
使用于大段的文案
备注：p标签中不能包含块元素的标签，比如title，div
5.ul标签
<ul>...</ul>
无需列表
6.li标签
<li>...</li>
<ul>
<li></li>
</ul>
7.ol列表
<ol>...</ol>
ul,ol的第一层子集一定是li，li的父级一定是ul或ol
有序列表
8.dl dt dd标签
dl 自定义列表
dt 列表标题
dd 列表说明
9.内联标签span
<span>...</span>
特性：
(1).同属性的标签排在同一排
(2).内容撑开宽度
(3).不支持宽高限制，不支持上线的padding和margin
(4).代码换行被解析为空格
10.内联标签strong
<strong>...</strong>
强调，类似与font-strong，权重比较高
11.内联标签em
<em>...</em>
斜体
12.内联标签a
<a href="http://www.baidu.com" target="_self">a标签当前窗口跳转</a>
13.群组选择器
以逗号分隔标签名称，用来给多个相同的标签定义相同的css样式
div,h,title{
margin:0;
}
10.块属性的标签特性：
(1).默认是父级100%的宽
(2).支持所有CSS的样式
(3).独占一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签的使用</title>
<link rel="stylesheet" href="css/1.css">
<style>
span {
border: 2px solid red;
}
</style>
</head>
<body>
<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<ul>
<!-- 无序ul标签 -->
<li>我的li列表1</li>
<li>我的li列表1</li>
<li>我的li列表3</li>
<li>我的li列表4</li>
</ul>
<ol>
<!-- 有序ol标签 -->
<li>我的li列表1</li>
<li>我的li列表1</li>
<li>我的li列表3</li>
<li>我的li列表4</li>
</ol>
<ul>
<li>
<ul>测试</ul>
</li>
</ul>
<dl>
<!-- dl dt dd标签 -->
<dt>标题1
<dd>标题1说明1</dd>
<dd>标题1说明2</dd>
</dt>
<dt>标题2
<dd>标题2说明3</dd>
<dd>标题2说明4</dd>
</dt>
</dl>
<!-- 内联熟悉标签span,strong,em,a -->
<span>这是span1</span><span>这是span11</span>
<span>这是span2</span>
<span>这是span3</span>
<strong>这是strong</strong>
<em>这是em</em>
<br>
<a href="http://www.baidu.com" target="_self">a标签当前窗口跳转</a>
<br>
<a href="http://www.baidu.com" target="_blank">a标签新窗口跳转</a>
<!-- 内联块标签 -->
<img src="" alt="">
</body>
</html>
网友评论