Html速成之基础知识点回顾+网页制作

HTML的四肢躯干

由于要从事安全岗，需要基本的读代码能力，所以用了几天时间粗略的学习了 HTML 学的比较浅薄，还望多多指点。
对于编辑器而言，建议使用HBuilderX对新手比较友善。

头部元素：文档说明和标题

1. ，申明是一个html文档；
2. 头部元素内容区；
3. charset属性规定 html文档为字符编码"utf-8"；
4. 在浏览器打开的页面上显示；

身体里的元素标签，标题，段落，注释

1. 不同等级的标题

        <h1>我是题目</h1>
		<h2>我是小题目</h2>
		<h3>我是小小题目</h3>
        <h4>我是段落题目</h4>
		<h5>我是小段落题目</h5>
		<h6>我是小小段落题目</h6>

字体大小和粗细随着<h数字>数字增大而递减

2. <p>这是一个段落</p>
3. <br>换行
4. <hr>在html页面中创建水平线
5.<!--这是一个注释 -->

多姿多彩，链接，图片，音频，视频。

1.链接：<a href="http://lmypz.top">这是一个连接</a>
2.图片：<img src="img/success.jpg" />加图片的路径或者图片的连接
3.音频：<audio src="img/WeChat_20210925142425.mp4" controls="ture">controls是音频播放控制台</audio>
4.视频：<video controls="ture" autoplay="autoplay"> autoplay属性一旦视频准备就绪就马上开始自动播放
			<source src="img/WeChat_20210925142425.mp4" type="video/ogg" >
			<source src="img/WeChat_20210925142425.mp4" type="video/mp4" >
		</video>

相对路径 和绝对路径

相对路径： 相对于html存储位置的路径， …/返回上一级目录，文件目录+文件名。
绝对路径： 完整的具体的路径地址。

列表标签

1.无序列表

 <ul type="square实心正方形" type="circle空心圆" type="disc实心圆" >
	<li>区区困难，</li>
	<li>区区挫折，实想欺我。</li>
	<li>可笑可笑！！！</li>
</ul>

2.有序列表

<ol type="I"古罗马数字排序 "1"阿拉伯数字排序 "A/a"大/小写母排序>
	<li>三更灯火</li>
	<li>五更鸡</li>
	<li>正是男儿读书时</li>
</ol>

3.自定义列表

<dl>
	<dt>黄沙百战穿金甲</dt>
	<dt>不破楼兰终不还</dt>
</dl>

表格

<tr>
		<table border="1" >
		<td>一格</td>
		<td>两格</td>
		</table>
</tr>
<tr>
		<table border="1" >
	    <td>一格</td>
		<td>两格</td>
		</table>
</tr>
<tr>
	<table border="6" bordercolor="red" width="20px" height="40px" align="center">
	<!-- 设置边框           设置边框颜色        边框宽度     边款高度       规定边款的对齐方式 -->
	<td>一格</td>
	<td>两格</td>
	</table>
</tr>

表单的标签

<input 这是个输入框 /行级表单元素 /><br><hr /><br>
<form action="http://lmypz.top" 点击提交会跳转的连接地址>
账号：<input type="text" 设置表单类型文本/><br>
密码：<input type="password"/><br>
<button>提交</button>
<input type="submit" 提交表单按钮/>
<input type="reset" 重置表单按钮/>
</form>

选框

        <br />单选框（radio） 一次只能选择一个<br />
	    <input type="radio" name="language" />python<br />
	    <input type="radio" name="language" />java<br />
		<input type="radio" name="language" />php<br />
		<br />复选框（chexbox） 可以选择多项<br />
		<input type="checkbox" name="love" />高薪<br />
		<input type="checkbox" name="love" />住宅<br />
		<input type="checkbox" name="love" />老婆<br />
		<input type="checkbox" name="love" />美满<br />

表单的提交方式
method:表单的提交方式。
1.默认的是get提交，表单里的值随着地址栏提交
2.post提交数据是在请求内部提交，提交数据大，安全性高。

CSS美化HTML里的元素

<style>
		/* 美化在该<style>作用内的所有元素所作用 */
		   p{
			background-color: #FFFF00 ;设置背景颜色   
			color: #8A2BE2;设置字体颜色；
			font-family: 宋体;设置字体
			font-weight: 800;设置字体粗细
			text-align: center;设置字体对齐方式岁
		   }
		</style>
		<p>在我看来，所有遇见的一切，就是最好的。</p><br>

CSS基本选择器

1.id选择器：通过指定Id，对id范围内的元素进行作用

        <style>
           #id选择器{
			color: #FF0000;
		}
		</style>
		<div id="id选择器">
		<p>我以微笑报明天</p>
		<p>生活诚不负我</p>
		</div>

2.元素选择器

3.类选择器：一般用于多个元素添加样式。

4.伪类选择器
a:hover 鼠标悬浮在超链接样式。

<style>
	li:hover {
		background-color:red; /* 展示隐藏元素 */
	}
	</style>
	<li>这样好嘛</li>

鼠标指到后改变背景色

白帽子hacker

更多分享，尽在微信公众号：## 白帽子hacker