HTML基础笔记(一)
程序员文章站
2022-04-24 15:34:28
...
文章目录
絮叨一下
学习爬虫的话总是需要一些 html css js 基础的要不一些反爬都可能过不去 在接下的一段时间内 重点分享一些 学习笔记 .
html 基础笔记
meta 的相关属性
<meta> 元数据
<meta charset="UTF-8">
<meta name="keywords" content="关键词1,关键词2">
<meta name="description" content="简单描述">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
响应式，优化手机端
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
标题
<h1></h1> ～<h6></h6>
如果两个标题标签在一起可以使用
<hgroup>
<h1></h1>
<h2></h2>
</hgroup>
一般一个文档中有且只有一个h1
h 系列 为语义标签 , 有助于搜索引擎抓取
表格标签
<table></table> : 用于定义表格标签
<tr></tr>:定义表格中的行
<td></td>:用于定义表格中的单元格
<th>设置表头标签</th>
本身自带属性 并非css属性 这是不一样的
| 属性 | 含义 |
|---|---|
| align | 设置对齐方式 |
| border | 设置边框 1 或者空 |
| cellpadding | 像素值 （文字与边框的距离） |
| cellspacing | 像素值 （单元格与单元格之间的距离） |
| width | 像素值或者是百分比 |
| bgcolor | 设置单元格和表格背景颜色 |
合并单元格
行合并：rowspan=""
列合并：colspan=""
合并规则：行合并在上 列合并在左
细线边框:border-collpase:collpase;
特性
行等高 列等宽
表格不设置宽高 内容自己撑开
设置宽高 默认由你自己设置的撑开
列表
无序列表：
<ul>
<li> </li>
<li> </li>
</ul>
<!-- ul 中只能出现li
但是li 中可以随意放其他标签 -->
有序列表：
<ol>
<li></li>
<li></li>
</ol>
自定义列表：
<dl>
<dt>标题</dt>
<dd>子标题</dd>
</dl>
a 标签
<a href="目标地址" target="打开方式_blank _self"></a>
<base href="基础地址" target="_blank">
锚点：回到界面某一个部分
<a href="新页地址#id值" target="打开方式_blank _self"></a>
id="big_box" 通常: _ 连接 class="big-box" -连接 标识符
css 属性 ：
| 属性 | 含义 |
|---|---|
| text-decoration: underline; | 默认有下划线 |
| text-decoration:none; | 取消下划线 |
表单
表单域
<form action="url地址" method="提交方式" name="表单名称"></form>
表单元素 input
-
type属性
属性 含义 button 定义可点击按钮 checkbox 定义复选框 file 定义输入字段和浏览按钮共文件上传 hidden 定义隐藏的输入字段 image 定义图形的提交按钮 password 定义密码字段 radio 定义单选按钮 reset 定义重置按钮 submit 定义提交按钮 rext 定义单行输入的字段 -
其他属性
属性 含义 name 定义input 的名称 在设置单选的时候需要设置相同 的name属性 来实现 单选 一组的时候需要name 相同 value 规定 input 元素的值 checked 规定这个input元素首次加载时应该时候被选中 maxlength 规定输入 的字段中的字符最大长度 checked 默认选中 reqired 不能为空
lable 标签
<lable for="sex"> </lable>
<input type="redio" name="sex" id="sex">
<!-- for 属性对应下面的id属性 -->
<!-- 男女这种多选有几个就需要加几个 -->
select 下拉
<select>
<option></option>
<option></option>
</select>
<!-- 至少包含一个option -->
在select 中定义selected="selected"时候默认选中
textarea 文本域
输入内容比较多的时候使用
<textarea>
</textarea>
参数：cols 每行多少字 rows 多少行
引用
<blockquote></blockquote>
<q></q>
布局标签
<body>
<header>
<!-- 可以理解为导航，作为网站的头部 可以有多个 -->
</header>
<main>
<!-- 网站的主题部分，只能有一个 -->
</main>
<footer>
<!-- 网页的底部 -->
</footer>
</body>
多媒体
audio
<audio src="文件.mp3" controls></audio>
| 属性 | 含义 |
|---|---|
| controls | 浏览器提供一个可以暂停，开始的界面 |
| autoaply | 是否自动播放不建议使用，而且不好用 |
| loop | 布尔属性，是否循环播放 |
由于浏览器的不同对文件类型以及编码不同，可以使用内嵌<source></source>
注意浏览器兼容性
<audio controls>
<source src="foo.wav" type="audio/wav">
Your browser does not support the <code>audio</code> element.
</audio>
写给看到最后的你
朋友，感谢你看到了最后，新手报道，技术不成熟的地方请多多指点，感谢！
公众号：Linux下撸python
期待和你再次相遇
愿你学的愉快
上一篇： html初级
下一篇： HTML基础（二）--基础标签