2020-8-13 web前端基础知识，web前端其实没想象中的难 180954
web前端基础知识，web前端其实没想象中的难。
最近打算学习Python爬虫，但是发现学习Python爬虫的必要前提条件是学好web（我只想学个爬虫，有必要这么为难我吗？难过一分钟）难过归难过，但是这点困难是不可能阻止到我学习爬虫滴，于是web学习之旅开始了，在网上看到很多本打算学Python爬虫的结果入了web坑陷入web学习无法自拔而荒废了Python的，觉得其实主要是因为web也是一个庞大的体系要想全部掌握那对于普通人来说一般是不现实的，学习之前一定要定位好明确的方向不然很容易迷失在web领域。比如想我本身学习web其实就是因为后期学Python爬虫需要用到因而并不打算深入研究web领域够后期Python爬虫使用即可，因而只是学习一些web最基本的知识和用法，不多说了上干活，下面是我学习web时做滴一些笔记。如果和我一样只是单纯的想学Python爬虫了解一下内容就差不多了。
HTML的作用
HTML的作用就是定义整个页面“长”成什么样子，相当于网站的骨架。
HTML搭建骨架的常用标签
标题标签：h1~h6
用法如下：
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
效果：
容器标签：div
定义大的模块，整个页面就是许多个div容器组合在一起。
用法：
<div>容器内容</div>
段落标签：p
用法：
<p>段落内容</p>
行内标签：span
行内标签使得元素内容可以在同一行显示
<span>内容</span>
段落标签<p>和行内标签<span>最大的区别就是用两个段落标签时候内容会有跨度隔阂，而用两个行内标签则不会出现隔阂而是第二个紧跟第一个末尾。
跳转标签：a
相当于超链接
跳转标签有一个href属性，属性中放网络路径，点击时会跳转到指定网络路径中，还有一个属性叫target，target属性值有_self ,_blank,作用是打开新窗口是否是当前窗口（不常用）
图片标签：img
图片标签有①src属性，属性中放要显示图片的路径，可以是本地路径也可以是网络路径。
②alt属性，属性中放图片显示不出来时，要显示的文字（有时会有遇到特殊情况显示不出来图片，可以显示文字来提示）
换行标签：br
多个行内元素在同一行时，如果需要换行可以使用这个标签换行标签是个单标签。
分割标签：hr
显示一条分割线，将内容划分开来，也是一个单标签。属性width设置分割线的宽度，size设置分割线的高度及
用法：
<hr size="20" width="1000">
效果：
列表标签
1.有序列表：ol
标签中嵌套li标签，li标签中放列表项，列表项前面的类型type设置，常见类型：数字，a，A，Ⅰ ，i
2.无序列表：ul
无序列表中列表项也是li标签包裹，前面类型不是数字，，a，A，Ⅰ ，i这些，是点，常见烈性：disc（实心圆），square（正方形），circle（空心圆）
3.图文混排列表：dl
显示标签项不再用li，而是使用dt，dd （dt:放标题部分 ，dd：放内容部分）
用法及效果：
用法：
<ol type="1">
<li>列表项</li>
<li>列表项</li>
<li>列表项
<ul type="circle">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
</li>
</ol>
效果：
块级元素和行内元素
块级元素
独占一行，标签的宽是浏览器屏幕的宽，高度由内容决定，常见的块级元素：div、p、ul、li、dl
行内元素
不独占一行，同一行可以放多个行内元素，行内元素的宽是有内容决定，高度也是由内容决定，常见的行内元素：span、a、em、i
行内-块级元素
不独占一行，宽度可以自己设置，常见行内-块级元素：input、button，img
改变元素属性方法
元素属性也不是固定不变的它是可以根据需求通过display这个属性而改变的。
display：block块级元素 ； inline行内元素 ；inline-block行内-块级元素 ； none把元素隐藏。
标签
标签分为双标签和单标签
双标签
标签符号成对出现的，有开始标签，有结束标签。大部分标签是双标签 ，如 <div> <div />
单标签
单个出现，常用的就是 <br /> 、<hr />、<input />、 <img />
表格table
用法：
<table border="4" align="center" cellpadding="15" cellspacing="4">
<caption>表格标题</caption>
<tr>//行
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>列</td>
<td>列</td>
<td>列</td>
</tr>
</table>
表格的一些属性：
border ：边框，值为数字类型
cellpadding：单元格内边距
cellspacing：单元格外边距
align：表格的对齐方式，可选值有——left （左对齐）、right（右对齐）、center（居中）
alian属性如果写在table上，table表格相对浏览器页面对齐方式；如果写在tr上，则是td|th中的文字对齐方式
width：设置宽度，如果在table中，则是设置整个table的宽；如果在td|th上则是设置对应列表的宽
合并属性：
行合并：rowspan=5 把多行合并成一行
列合并：colspan=3 把多列合并成一列
效果：
表单form
form表单标签
- 区域块：fieldset 、legend设置区域块的名称（fieldset的等级高于legend）
- 用户输入框：input type= ’text‘
- 单选按钮：input type=’radio‘
- 多选按钮：input type=’checkbox‘
- 下拉框：select、option（select等级高于option）
- 密码：input type=’password‘
- 上传文件：input type=’file‘
- 范围数字：input type=’range‘
- 提交：input type=’submit‘
- 重置：input type=’reset‘
- 按钮：button
input标签属性
placeholder：设置提示文字
name：设置input标签的提交数据键名
value：设置input标签的值
form标签属性
action：url地址，数据提交的地址
method：提交的方式，有get/post，默认值是get
用法及效果：
用法：
<form action="url地址">
<fieldset>
<legend>这个是区域块名</legend>
<span>普通文本</span>
</fieldset>
<!--用户输入-->
用户名：<input type="text" placeholder="请输入用户名或手机号" name="userName">
<br>
<!-- 单选按钮 -->
性别：<input type="radio" name="sex" value="1"> 男
<input type="radio" name="sex" value="2"> 女
<br>
爱好：<input type="checkbox" name="hobby" value="1">打游戏
<input type="checkbox" name="hobby" value="2">看电影
<input type="checkbox" name="hobby" value="3">敲代码
<input type="checkbox" name="hobby" value="4">逛街
<br>
地址：<select name="address" >
<option value="1">云南</option>
<option value="1">昆明</option>
<option value="1">五华</option>
</select>
<br>
密码：<input type="password" name="pwd" placeholder="请输入密码">
<br>
上传文件：<input type="file" name="myfile" >
<br>
数字：<input type="range" name="num" max="15" min="0">
<br>
<!-- 提交 -->
<input type="submit" >
<!-- 重置 -->
<input type="reset" >
</form>
效果：
啰啰嗦嗦写了些，这些就是我最近学的HTML的基本用法了，尽管不是那么详细但毕竟我们只是为了学爬虫，这些基本知识还是够了，下期我讲继续学习更新css的基本用法，生命不息，奋斗不止，加油吧！
——————嘻嘻蛋炒饭
上一篇： 怎么通过配置tomcat搭建图片服务器
下一篇： SystemVerilog命令行参数