html + css回顾

html + css回顾

目录

标题标签

列表标签 

无序列表

有序列表 

自定义列表

表格

超链接 

图片

表单

html简单练习

css引入

css选择器

标题标签

<h3>标题标签</h3>
<p>h1~h6是所有的标题标题标签，标签从h1~h6逐渐变小</p>
<p>p标签是为文本标签</p>
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
<p>hr标签为水平线</p>
<hr>

列表标签 

列表标签分为：无序列表 、有序列表、自定义列表

无序列表

<h4>1、无序列表</h4>
<ul><li>曹操</li><li>刘备</li><li>孙权</li></ul>

有序列表 

<h4>2、有序列表</h4><ol><li>吕布</li><li>赵云</li><li>典韦</li>
</ol>

自定义列表

<h4>3、自定义列表</h4>
<p>dt标签为列表头，dd为列表内部内容</p>
<dl><dt>常玩游戏</dt><dd>王者</dd><dd>吃鸡</dd><dd>联盟</dd>
</dl>

 表格

 thead标签为表格头标签，tbody标签为表格正文标签，tfoot标签为表格结尾标签

 <p>table为表格标签</p><table border="1" cellspacing="0" cellpadding="20"><thead><tr><th>编号</th><th>名称</th><th>伤害</th></tr></thead><tbody><tr bgcolor="yellowblue"><td>1</td><td>火箭炮</td><td>100</td></tr><tr><td>2</td><td>坦克</td><td>80</td></tr><tr bgcolor="yellowblue"><td>3</td><td>榴弹炮</td><td>60</td></tr></tbody><tfoot ><tr align="center"><td colspan="3">以上为所有武器的详情</td></tr></tfoot></table>

超链接 

<p><ul><li>a标签定义超链接，用于从一张页面链接到另一张页面。</li><li>a元素最重要的属性是 href 属性，它指示链接的目标。</li><li>当href内容为空时，是默认刷新当前页面</li></ul>
</p>
<a href=""></a>
<p>如果我们想将a标签跳转到对应的位置，需要让href指向一个id属性</p>
<a href="#top">返回top位置</a>

图片

<p>img标签可以在页面上添加一张图片，并设置图片大小</p>
<p>alt属性表示，图片无法正常加载或者丢失后，页面显示的文字</p>
<img src="img/黄鹤楼.jpg" alt="这里是黄鹤楼">

表单

<p>表单标签分为父标签和子标签<ul><li>父元素是form，子元素有很多，以input为核心</li><li>可以实现登录、注册等功能</li><li>用来像后端服务器提交数据</li><li>单选和复选的默认选中关键字是checked</li><li>下拉框的默认选中关键字是selected</li><li>所有的表单项要把参数提交给后台服务器，必须要有name和value属性值</li></ul>
</p>
<form action="" method="">姓名：<input type="text" name="username"/><br/>密码：<input type="password" name="password" /><br/>年龄：<input type="number" name="age"/><br>生日：<input type="date" name="birth"><br>性别：<input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女<br>爱好：<input type="checkbox" name="like">唱<input type="checkbox" name="like">跳<input type="checkbox" name="like">rap<input type="checkbox" name="like">篮球<br>头像：<input type="file"><br>省份：<select name="province"><option>请选择省份</option><option>湖北</option><option>河南</option><option>湖南</option><option>河北</option></select>城市：<select name="city"><option >武汉</option><option>郑州</option><option>岳阳</option><option>石家庄</option></select><br>简介：<textarea></textarea><br><button>普通按钮</button><input type="submit"><button type="submit">提交按钮</button><input type="reset"><button type="reset">重置按钮</button>
</form>

html简单练习

<h2>唐诗三首</h2>
<ul><li><a href="">黄河楼</a></li><li><a href="">江雪</a></li><li><a href="">静夜思</a></li>
</ul>
<hr/><h2>黄鹤楼</h2>
<p>昔人已乘黄鹤去，此地空余黄鹤楼</p>
<p>黄鹤一去不复返，白云千载空悠悠</p>
<p>晴川历历汉阳树，芳草萋萋鹦鹉洲</p>
<p>日暮乡关何处是？烟波江上使人愁</p>
<img src="img/黄鹤楼.jpg" alt="黄鹤楼" width="500" height="400"><h2>江雪</h2>
<p>千山鸟飞绝，万径人踪灭</p>
<p>孤舟蓑笠翁，独钓寒江雪</p>
<img src="img/江雪.jpg" alt="江雪" width="500" height="400"><h2>静夜思</h2>
<p>床前明月光，疑是地上霜</p>
<p>举头望明月，低头思故乡</p>
<img src="img/静夜思.jpg" alt="静夜思" width="500" height="400">

css引入

// head内代码
<style>
div{border: 5px solid rebeccapurple; width: 200px;height: 100px;
}
p{border: 5px solid yellowgreen;width: 200px;height: 100px;
}
</style>// body内代码
<h3>css引入</h3><ul><li>1、直接在某个元素上添加style属性</li><li>2、在head标签中田间style标签</li><li>3、外部创建css文件，通过link标签引入</li>
</ul><div style="border: 5px solid rebeccapurple; width: 200px; height: 100px;">1</div><div>2</div><p>3</p>

css选择器

<ul><li>id选择器，class选择器，元素选择器</li><li>后代  子代  交集  并集选择器</li><li>属性选择器</li><li>伪类选择器</li>
</ul>

基本样式

<div style="border: 5px solid rebeccapurple; width: 200px; height: 100px;">1
</div>
<div>2
</div>
<p>3
</p>

使用类选择器 

.a{font-weight: bolder; // 文本加粗color: red; // 字体颜色设置为红色
}<div style="border: 5px solid rebeccapurple; width: 200px; height: 100px;">1
</div>
<div class="a">2
</div>
<p class="a">3
</p>

使用id选择器

.a{font-weight: bolder; // 文本加粗color: red; // 字体颜色设置为红色
}
#one{color:blue; // 字体颜色设置为蓝色
}<div style="border: 5px solid rebeccapurple; width: 200px; height: 100px;">1
</div>
<div id="one" class="a">2
</div>
<p class="a">3
</p>

div标签同时拥有class选择器和id选择器，但最终颜色为id选择器的blue。说明id选择器的优先级大于类选择器，而类选择器的优先级高于元素选择器。

好了，最后祝大家学习进步，心想事成！