HTML_02

1. P: 段落

块级元素

上下边距 1em;

p {

display : block ;

margin-block-start : 1em ;

margin-block-end : 1em ;

margin-inline-start : 0px ;

margin-inline-end : 0px ;

}

2. font字体标签

标签已被淘汰。 color 颜色， face: 字体， size ：大小

font-size : 文字的大小

font-family : 文字的 家庭 : 宋体，仿宋， Gothic 等等

color : 文字的颜色

font-weight : blod ; 粗体

font-style : italic ; 斜体

12222

<font size = "2em" color = "red" face = " 宋体 " > 这是 font 标签，已经被淘汰了，很红 </font>

33333

hello w <span style = "font-size: 2em;font-weight:bold; color: yellow;

font-family:'Courier New', Courier, monospace;font-style:

italic;" > or </span> ld

4444

56666

3. 基本标签

3.1 b标签和strong标签

区别 ：都是粗体字 , b 只是粗体， strong 是强调语义。

3.2 i标签和 em标签、cite

区别 ； 都是斜体， i 只是斜体， em 是弱强调语义， cite 是引用语义。

h <b> el </b> lo wM <strong> or </STRong> ld

<br />

<i> 徐志摩 </i> 简介 , <em> 1910 </em> 如杭州学堂学习 <br/>

<cite> 《徐志摩诗歌》 </cite> 学习

3.3 del 删除线文字

text-decorition: line-through;

4. 图片标签

4.1 图片的格式：

png / bmp / jpg / gif / tif / webp / base64 / jfif .....

位图， 动图

4.2 属性

src ： 图片的资源位置

alt: 图片不存在时，提示的信息

title: 悬停图片时显示的内容

align: left/center/right: 图片相对文字的位置，淘汰了

width/height: 图片大小。

<div style = "width: 800px; height: 600px; border: 1px solid black;" >

<img src = "../imgs/b2.webp" width = "100%" height = "100%" >

</div>

<div style = "width: 800px; height: 600px; border: 1px solid black;" >

文字文字 文字文字

<img src = "../imgs/bg.jpg" width = "200px" height = "200px" alt = " 图片找不到 "

title = " 这是一个背景图 " align = "right" >

</div>

base64 格式

<img src = "data:image/jpeg;base64,/9j/" >

5. 链接与锚点a

属性 ：

href=“” 链接的地址

target=“” ， 链接的方式默认是 _self, _blank 新开选项卡， _top/__parent/xxxname

访问前，访问后，访问中有颜色，有下划线。

<a href = "https://www.baidu.com" target = "_blank" > 百度 </a>

<a href = "https://www.google.com" > 谷歌 </a>

a 可以包含任何元素，从而包含元素能够点击

锚点用法 ： # 开头 可以去到某个标签的位置上

<a href = "#b1" > 谷歌 </a>

点击谷歌，就去到元素 id 是 b1 的锚点上

<a id = "b1" href = "#" > top </a>

6. 列表

列表的样式盒子模型

ul {

display : block ;

list-style-type : disc ;

margin-block-start : 1em ;

margin-block-end : 1em ;

margin-inline-start : 0px ;

margin-inline-end : 0px ;

padding-inline-start : 40px ;

}

块， 上下外边距 1em

左内边距 padding ； padding-left:40px;

list-tyle-type: 显示的形式 disc 是点， decimal 数值 , type 属性的值

ul 无序列表， ol 有序列表

<ul>

        <li> 中国 </li>

        <li> 美国 </li>

        <li> 俄罗斯 </li>

</ul>

<ol>

        <li> 创建链接 </li>

        <li> 创建执行器 </li>

        <li> 执行 SQL ，处理结果 </li>

</ol>

<ul style = "list-style: none;padding-left: 0px;" >

        <li> 中国 </li>

        <li> 美国 </li>

        <li> 俄罗斯 </li>

DL>DT----DD,DD, 自定义列表不常用

</ul>

<dl>

<dt> 魏国 </dt>

<dd> 曹操 </dd>

<dd> 夏侯惇 </dd>

<dd> 魏豹 </dd>

<dt> 蜀国 </dt>

<dd> 发证 </dd>

<dd> 糜 </dd>

</dl>

 
7 table>tr>th|td

表格行列确定单元格。规则表格。

属性 ：

border: 边框，不推荐使用

width/height: width 会自动分配到列。

align: left center right ; 水平居中，

cellspacing ： 单元格之间的距离

cellpadding: 单元格内容的内边距

style=border-collapse: collapse; 重复的边线合并

<table border = "1" width = "600" align = "center"

cellspacing = "0" cellpadding = "0" style = "border-collapse: collapse;" >

7.1 col gorup和col

用于设置列宽

7.2. caption：

用于表格的title. 有 algin:top/bottom

7.3 thead, tbody, tfoot

表格的 头部， 主体， 脚部

<table border = "1" width = "600" align = "center" cellspacing = "0" cellpadding = "0"

style = "border-collapse: collapse;" >

<colgroup>

<col width = "100" />

<col width = "300" />

<col />

</colgroup>

<caption> 这是一个表格 title </caption>

<thead>

<tr>

<th> 姓名 </th>

<th> 入职企业 </th>

<th> 薪资 </th>

</tr>

</thead>

<tbody>

<tr>

<td> 王月 </td>

<td> 东方文化出版社 </td>

<td> 4000 </td>

</tr>

<tr>

<td> 刘文玉 </td>

<td> 大连万达 </td>

<td> 6000 </td>

</tr>

</tbody>

<tfoot>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</tfoot>

</table>

7.4. -=tr: 列，td单元格， th头部的单元格

align: 水平定位 , left ,center, right

valgin: 垂直定位： top, middle, bottom

7.5 合并单元格

左上原则

合并列： colspan:

合并行： rowspan:

8. 表单：form

目标 ： 为了提交数据 完成浏览器和服务端的交互

属性：

action ； 提交的 请求地址

method: GET/POST ；

get 默认的，数据在请求地址上

post: 以数据流形式发送数据

表单中的 name 属性会变成提交数据的参数名

GET 请求

请求地址 ? 参数列表

请求地址 ? 参数名 = 值 & 名 = 值。。。

https://www.baidu.com/s?ie=utf-8 &wd =b%E7%AB%99

<form action = "https://www.baidu.com/s" method = "get" >

<input type = "text" name = "ie" value = "utf-8" />

<input type = "text" name = "wd" />

<input type = "submit" value = " 百度一下提交表单 " >

</form>

9. input: 标签

type 属性：

默认是 text

size

maxlength

value: 值

placeholder ： 没有值的时候显示内容

<input /><br>

<input type = "text" size = "10" maxlength = "12" value = " 值 " />

<input type = "text" size = "10" maxlength = "12" placeholder = " 请输入一个值 "

/>

required: 浏览器自带，必须输入。

可以通过表单的 novalidate="novalidate" 关闭自带验证

disabled: 可不用的，表单提交不了

readonly: 只读

<form action = "a" novalidate = "novalidate" >

<input /><br>

<input type = "text" size = "10" maxlength = "12" value = " 值 "

required />

<input type = "text" size = "10" maxlength = "12" placeholder = " 请

输入一个值 " />

<input type = "text" value = "111" disabled name = "a1" />

<input type = "text" value = "111" readonly name = "a2" />

<input type = "submit" >

</form>