HTML基础

最新推荐文章于 2023-05-28 16:39:38 发布

Dawn~cl

最新推荐文章于 2023-05-28 16:39:38 发布

阅读量206

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/Dawn_cl/article/details/108803377

版权

1. 介绍

HTML 是一种使用非常广泛的网页标签语言
HTML 是Hypertext Markup Language的英文缩写,即超文本标记语言
HTML 语言是一种标记语言,不需要编译,直接由浏览器执行
H5 的标准<!DOCTYPE html>

2. 标签特性

容错性强
成对出现
已预定义
全部小写
注意格式

3. 全局架构标签格式

<base> 标签为页面上的所有链接规定默认地址或默认目标。

假设图像的绝对地址是：

<img src=“http://www.w3school.com.cn/i/pic.gif” />

现在我们在页面中的 head 部分插入 <base> 标签，规定页面中所有链接的基准 url：

<head>
<base href=“http://www.w3school.com.cn/i/” />
</head>

在上例中的页面上插入图像时，我们必须规定相对的地址，浏览器会寻找文件所使用的完整 URL：

<img src=“pic.gif” />

4. BODY 标签属性

text：用于设定整个网页中的文字颜色
bgcolor:用于设定背景颜色
background:用于设定背景墙纸所用的图像文件，可写文件的绝对或相对路径
leftmargin:设定网页显示画面与浏览器窗口左边沿的间隙，单位为像素
topmargin:设定网页显示画面与浏览器窗口上边沿的间隙，单位为像素
link：用于设定一般超链接文本的显示颜色
alink:用于设定点击时的超链接文本的显示颜色
vlink:用于设定访问过的超链接文本的显示颜色
class、name、id、style 属性后面结合 JS 和 CSS 使用

5. 字符实体

特殊字符可以用数值码和字符实体两种方式表示
例如：

显示	实体名称	实体编号
空格
<	<	<
>	>	>

6. 常用标签（文本修饰)

<h1></h1>
…
<h6></h6>
标题 <b></b><strong></strong> 加粗 <i></i><cite></cite><em></em> 斜体 <u></u
><ins></ins> 下划线 <s></s><del></del> 删除线 <sub></sub><sup></sup> 上标和下标
<font></font>(face、size、color)

演示

标题

加粗加粗斜体斜体斜体下划线下划线 ~~删除线~~ ~~删除线~~ ₂n ³ 上标和下标 (face字体、size大小、color颜色)

7. 常用标签（格式控制）

<p></p>
段落 <br />换行 <nobr></nobr>不换行
<hr />
水平线
<ul></ul>
无序列表
<ol></ol>
有序列表
<li></li>
列表元素
<dl></dl>
定义列表
<dt></dt>
列表标题
<dd></dd>
列表元素

aaabbb
cccddd

aaabbbcccsasfsuagbbgbsbafcasbabsbbfabbjabfbasbfbasjfbabsfabsfabsfbsafbabfabfafbjbfafjdddeeefffadasffafsasfsuagbbgbsbafcasbabsbbfabbjabfbasbfbasjfbabsfabsfabsfbsafbabfabfafbjbfafj

无序列表
列表元素

有序列表
列表元素

列表标题

列表元素

8. URL 统一资源定位符

URL：Uniform Resource Locator
基本组成：协议、地址、端口、文件、参数
参数形式：?键 1=值 1&键 2=值 2&键 n=值 n
http://www.baidu.com:80/index.html?username=lisi&password=123

9. 表格标签

表格的行、列、跨行、跨列与 excel 相似
<table> 表格
属性：bgcolor、border、bordercolor、cellspacing、cellpadding、width、height、align
<tr> 行
属性：align、valign、bgcolor
<td> 列
属性：width、height、align、valign、colspan、rowspan
<th> 表头
<caption> 表格名

<table width="100px" border="1" cellpadding="3" cellspacing="0" align="center">
  <caption>
    <h1>学员表</h1>
  </caption>
  <tr>
    <th colspan="3" align="left">学员基本信息</th>
    <th colspan="2" align="right">成 绩</th>
  </tr>
  <tr>
    <th>姓 名</th>
    <th>性 别</th>
    <th>专 业</th>
    <th>课 程</th>
    <th>分 数</th>
  </tr>
  <tr align="center">
    <td>小凯</td>
    <td>男</td>
    <td rowspan="2">计算机</td>
    <td rowspan="2">PHP开发</td>
    <td>86</td>
  </tr>
  <tr align="center">
    <td>小珊</td>
    <td>女</td>
    <td>98</td>
  </tr>
</table>

学员表
学员基本信息			成绩
姓名	性别	专业	课程	分数
小凯	男	计算机	PHP开发	86
小珊	女	计算机	PHP开发	98

10. form 表单

form 表单 1

<form>标签将要提交的区域给套起来
method 属性常用方法有:get、post、(put、delete、patch 了解)
action 是提交地址
target 打开方式 _self _blank(在新标签页打开)
enctype 常用值：
application/x-www-form-urlencoded（默认不用记）
multipart/form-data(上传文件时使用)

form 表单 2

radio 和 checkbox 的默认选中为 checked
col 列,row 行

<input type="“submit”" value="“”" />
<input type="“button”" value="“”" />
<button></button>
<input type="“text”" name="“”" value="“”" />
属性：size、value、maxlength、readonly、disabled、placeholder
<input type="“password”" name="“”" />
<input type="“radio”" name="“”" value="“”" />
<input type="“hidden”" value="“”" name="“”" />
<input type="“checkbox”" value="“”" name="“”" />
<input type="“file”" value="“”" name="“”" />
<select></select>
<option></option>
<select>
  标签的属性：multiple(多选)、size、name
  <option>
    标签的属性：value、selected
    <label></label>
    属性：for
    <textarea></textarea>
    属性：cols、rows
  </option>
</select>

演示

在这里插入图片描述

11. 无意义标签

div
span
footer
header
section
注：重点是配合 CSS 进行使用

<section style="height:300px; width:300px">
  <header style="height:50px; background:red ">
    <span style="color:white">这是头部</span>
  </header>
  <main style="height:100px; background: greenyellow;">
    <div>主体部分</div>
  </main>
  <footer style="height:50px; background: blue; color:yellow">这是底部</footer>
</section>

演示

在这里插入图片描述

Dawn~cl

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

2020.9.231. 介绍HTML 是一种使用非常广泛的网页标签语言HTML 是Hypertext Markup Language的英文缩写,即超文本标记语言HTML 语言是一种标记语言,不需要编译,直接由浏览器执行H5 的标准<!DOCTYPE html>2. 标签特性容错性强成对出现已预定义全部小写注意格式3. 全局架构标签格式<base> 标签为页面上的所有链接规定默认地址或默认目标。假设图像的绝对地址是：<img src=“ht
复制链接

扫一扫