HTML与CSS基础-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34609519/article/details/109084803

目标：根据psd文件，使用html+css布局出符合w3c规则的页面。

网页

由文字，链接，图片等元素组成。

1 浏览器

网页显示、运行的平台。常见IE（Trident）、火狐（Gecko）、谷歌（Blink是webkit分支）、safari（webkit）、Opera（blink）。
Android手机使用率较高的是webkit内核。ios一般是safari浏览器。

—————————————————————————————————————————

2 W3C

浏览器的内核不同，使用同一套标准显示网页内容。
结构（网页元素html），表现（外观样式css），行为（交互js）组成。

—————————————————————————————————————————

html

超文本标记语言，是一套标记标签。语义化标签：在最合适的地方放置最符合的标签。

1 骨架标签

<!DOCTYPE html>   <!--声明语句：按照html5规范解析该页面--> 
<html lang="en">  <!--lang属性为盲人浏览网页的机器设置的,中文的为zh-CN.--> 
	<head>
		<!--meta提供有关页面的元信息.charset指定字符编码是告诉浏览器，当前网页的字符编码为 UTF-8.--> 
		<meta charset="UTF-8"> 
		<title>网页标题</title>
	</head>
	<body>
		网页内容
	</body>
</html>

2 排版标签

2.1 标题标签 h1-h6

<h1>标题1</h1><!--一个页面中仅有一次h1标签-->
<h2>标题2</h2>
<h3>标题3</h3>

在这里插入图片描述

2.2 段落标签 p

    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>

在这里插入图片描述

2.3 水平线标签 hr

<hr />

在这里插入图片描述

2.4 换行标签 br

段落1    <br />  段落2

在这里插入图片描述

2.5 盒子标签： div和span[布局，无语义]

<!--划分区域：独占一行，默认宽度100%，高度为0-->
<div></div> 
<!--文本修饰：一行可放置多个-->
<span></span>

3 文本格式化的标签

3.1 加粗标签 b strong(有语义)

<b>内容</b><br/><strong>内容</strong>

在这里插入图片描述

3.2 斜体标签 i em(有语义)

<i>内容</i><br/><em>内容</em>

在这里插入图片描述

3.3 下标sub 、上标 sup

a<sub>2</sub>a<sup>2</sup>

在这里插入图片描述

3.4 删除线标签 s del(有语义)

<s>内容</s> <del>内容</del>

在这里插入图片描述

3.5 下划线标签 u ins(有语义:插入文本)

<u>内容</u> <ins>内容</ins>

在这里插入图片描述

3.6 预格式化标签 pre【不常用】

<!--保留文本原有格式：空格、换行等保留-->
<pre>内容</pre>

4 标签的属性书写格式

<标签名 属性="value">内容</标签名>

4.1 图像标签 img

<!--src是必须属性，img是行内元素-->
<img src="url,图片地址" alt="图片无法显示时显示的文本" title="鼠标悬停时显示的提示文本" height="500"/>
<!--width与height 是等比缩放的，因此设置一个即可-->

4.2 链接标签 a

<!--href是必须属性,#是空链接-->
<a href="跳转url" target="打开方式">链接内容</a>
<!--a标签的target属性有5个可选值：  
	_self：在当前框架中打开链接（默认值） 
	_blank：在全新的空白窗口中打开链接 
	_top：在顶层框架中打开链接 
	_parent：在当前框架的上一层打开链接 
	framename：在指定的框架或浮动框架内打开链接（框架名可以自定义）
-->

锚点实现：id属性+href

<!--使用id记录-->
<a href="#santa">圣诞老人</a>
<!--其他数据...-->
<h2 id="santa">圣诞老人</h2>

在这里插入图片描述
点击a链接–圣诞老人后，页面自动跳转至锚点位置，如下所示。注意观察title位置与页面左侧滚动条。

base标签

<!--设置所有a链接的打开方式，位于head标签内-->
<base target="_blank"/>

4.3 表格

普通表格：默认格式为表头thead 主体tbody 表尾tfoot

<!-- 表格属性：边框，宽，高，水平对齐方式，单元格之间间距，单元格边沿与其内容之间的空白 --> 
    <table 
	  border="1"  
      width="400"
      height="200"
      align="center"
      cellspacing="10"
      cellpadding="20"
	>
      <caption>
        个人信息表
      </caption>
	 <tr>
          <th>年龄</th> <!-- 表头单元格:加粗且居中 -->
          <th>性别</th>
          <th>姓名</th>
      </tr>
      <tr><!-- 行 -->
        <td>11</td>
        <td>12</td>  <!-- 该行的单元格 -->
        <td>13</td>
      </tr>
      <tr>
        <td>21</td>
        <td>22</td>
        <td>2</td>
      </tr>
      <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
      </tr>
    </table>

在这里插入图片描述
合并单元格
跨行合并 rowspan="2"
跨列合并 colspan="3"

<table border="1" align="center" cellspacing="0">
   <tHead>
      <tr>
        <th>年龄</th>
        <th>性别</th>
        <th>姓名</th>
        <th rowspan="2">照片</th>
      </tr>
   </tHead>
   <tBody>
      <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
      </tr>
      <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
      </tr>
   </tBody>
   <tFoot>
      <tr>
        <td>31</td>
        <td colspan="3">32</td>
      </tr>
   </tFoot>
</table>

在这里插入图片描述

4.4 列表：布局（整齐且自由）

无序列表

<ul type="disc">  <!-- disc是实心圆(默认)  cicrle是空心圆  square是实心方块 -->
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

在这里插入图片描述

有序列表

<ol type="1">  <!-- 1是数字排序(默认)  a/A是小/大写字母排序  i/I是罗马字母排序 -->
  <li>s</li>
  <li>x</li>
  <li>d</li>
</ol>

在这里插入图片描述

自定义列表

    <dl>
      <dt>北京</dt>
      <dd>昌平</dd>
      <dd>大兴</dd>
    </dl>
    <dl>
      <dt>陕西</dt>
      <dd>西安</dd>
      <dd>渭南</dd>
    </dl>

在这里插入图片描述

4.5 表单：提交信息给服务器

提示信息+表单控件 组成 表单域

4.5.1 input控件

<input type="属性值" name="" value="" />   
文本输入框、密码输入框、单选框、复选框、按钮、提交按钮、重置按钮、图片按钮、上传文件

<form>
	<div>用户名：<input type="text" name="username" value="" placeholder="请输入用户名"/></div>
    <div>密码框：<input type="password" name="pw" value="" /></div>
    <div>
      性别：男<input type="radio" name="sex" checked />   <!-- checked属性表示默认选中 -->
           女<input type="radio" name="sex" />
    </div>
    <div>
      爱好：游泳<input type="checkbox" name="hobby" /> 
           下棋<input type="checkbox" name="hobby" /> 
           爬山<input type="checkbox" name="hobby" disabled/><!--disabled属性表示禁止使用 -->
    </div>
    <input type="button" value="获取短信验证码" />
    <input type="submit" value="提交" />
    <input type="reset" value="重置" />
    <input type="image" src="img.png" value="图片按钮" />  <!-- 图片按钮 -->
    <input type="file" name="" id="" multiple/><!--multiple属性表示多选 -->
</form>

在这里插入图片描述

4.5.2 label控件

记录input之前的输入内容，提高用户体验

    <div>
      <label for="name">用户名：</label>
      <input type="text" id="name" name="username" value="" />
    </div>

在这里插入图片描述
2. 将单选框的范围扩大

<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label>

在这里插入图片描述

4.5.3 textarea控件

你的评论：<textarea name="comment" id="" cols="20" rows="10"></textarea>

在这里插入图片描述

4.5.4 select控件（不同浏览器显示样式不同，尽量少用）

    <select name="" id="">
      <option value="">选择</option>
      <option value="" selected>1</option>
      <option value="">2</option>
      <option value="">3</option>
      <option value="">4</option>
    </select>

在这里插入图片描述

4.5.5 form表单域

	<!--action是表单中数据提交的地址，Input必须有name和value属性，method表示请求方式-->
	<!--get通常表示获取数据,地址栏可见发送数据；post通常表示提交数据，地址栏不可见，且可以提交大量数据；-->
    <form action="url" method="get" name="form1">
      <div>用户名：<input type="text" name="username" value="" /></div>
      <div>密码框：<input type="password" name="pw" value="" /></div>
      <input type="submit" value="提交" />
      <input type="reset" value="重置" />
    </form>

点击提交之后
在这里插入图片描述
点击重置之前之后

4.5.5 表格表单组合

<form action="">
    <table border="1" cellpadding='30' >
        <tBody>
            <tr align="center">
                <td rowspan="4">总体信息</td>
                <td colspan="2">用户注册</td>
            </tr>
            <tr>
                <td>用户名：</td>
                <td><input type="text" placeholder="请输入用户名"></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" placeholder="请输入密码"></td>
            </tr>
            <tr align="center">
                <td colspan="2" >
                    <input type="submit">
                    <input type="reset">
                </td>
            </tr>
        </tBody>
    </table>
</form>

在这里插入图片描述

标签总结

双标签与单标签（空元素）

双标签

h1-h6 p div span a strong em del ins
table tr th td    ul ol li   dl dt dd      textarea label select form

单标签

hr br img base     input

特殊字符（常用）

空格：&nbsp;        <: &lt;          >: &gt;
版权©：&copy;       注册商标®：&reg;                 摄氏度℃：&deg;

HTML标签的类型

具体规则详见 HTML标签嵌套规则

块级元素

h1-h6 p ul ol li div form table
1 单个标签独占一行
2 宽高，内外边距可自定义设置。宽度默认同父级。
3 里面可以放行内元素，块级元素
4 p，h1-h6, dt内不能放块级元素

行内元素

span a em strong img(虽然是inline,但也是替换元素，可以设置宽高)
1 多个元素默认排在一行。内联元素折行会产生空隙，对body设置font-size=0可以解决该问题。
2 宽高由内容撑开，无法自定义
3 内部只能放置文本和其他行内元素

行内块元素

input dt select
1 一行可放多个元素
2 宽高可自定义设置,默认宽度是内容宽度

改变标签类型

display:block/inline/inline-block/none;  none是不占空间的隐藏
visibility: hidden;  占空间的隐藏

案例

<style>
a {
    display: inline-block;
    width: 100px;
    height: 30px;
    color: white;
    text-align: center; 
    line-height: 30px; //单行文本垂直居中
    text-decoration: none;
    background-color: orchid;
  }
</style>

在这里插入图片描述

HTML标签按内容分类

在这里插入图片描述
详细参见HTML5内容模块

HTML标签按显示分类

替换标签

浏览器根据标签的属性显示其内容。

img  input ...

非替换元素

浏览器根据标签内容显示其内容。

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。
属性值
application/x-www-form-urlencoded
在发送前编码所有字符（默认）
multipart/form-data
不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain
空格转换为 “+” 加号，但不对特殊字符编码。

Translate不会引发重排因为 GPU 进程会为其开启一个新的复合图层，不会影响默认复合图层（就是普通文档流），所以并不会影响周边的 DOM 结构，而属性的改变也会交给 GPU 处理，不会进行重排。使 GPU 进程开启一个新的复合图层的方式还有 3D 动画，过渡动画，以及 opacity 属性，还有一些标签，这些都可以创建新的复合图层。这些方式叫做硬件加速方式。你可以想象成新的复合图层和默认复合图层是两幅画，相互独立，不会彼此影响。降低重排的方式：要么减少次数，要么降低影响范围，创建新的复合图层就是第二种优化方式。绝对布局虽然脱离了文档流，但不会创建新的复合图层，因此当绝对布局改变时，不会影响普通文档流的 render tree，但是依然会绘制整个默认复合图层，对普通文档流是有影响的(这里好像是只会触发自身的重排和重绘，但不会使其他元素发生重排)。如果你要使用硬件加速方式降低重排的影响，请不要过度使用，创建新的复合图层是有额外消耗的，比如更多的内存消耗，并且在使用硬件加速方式时，配合 z-index 一起使用，尽可能使新的复合图层的元素层级等级最高。