html网页基础-标签

最新推荐文章于 2023-05-09 17:47:45 发布

tujunyong

最新推荐文章于 2023-05-09 17:47:45 发布

阅读量393

点赞数

本文链接：https://blog.csdn.net/tujunyong/article/details/53249575

版权

HTML
1简介
（1）概念：HyperText Mark-up Language 超文本标记型语言。完成对用户的网页显示功能！

（2）准则：1：单个网页包含两部分：head和body
     2：格式 <html>
                      <head>设置页面信息</head>
                   <body>显示于页面的内容</body>
                  </html>
3：标签有开始，也要结束；若无结束标签，则需要在开始标签内结束（<br/>）
4：不区分大小写的

（3）html的操作思想
* 在网页中包含许多数据，不同的数据要不同的显示效果，使用标签对数据进行改造，通过修改标签的属性值来实现标签内数据样式的变化。

2、字体标签
（1）文字标签 <font>
<font color="文字颜色" size="文字大小">文字内容</font>
属性color：颜色 1.red 2.#ffffff（RGB三基色） 3.rgb（255,0,0）;
属性size：文字大小设置（1-7）

（2）标题标签
<h1></h1> <h2></h2>.......<h6></h6>标题标签自动换行，从h1到h6字体大小依次变小

（3）水平线标签<hr/> color和size（范围1-7）

（4）注释标签

（5）特殊字符  实现空格的操作 .....

3、列表标签
（1）实现层级列表：
传智播客
      教研部
      人事部
      学工部
<dl>
<dt>传智播客</dt>
<dd>教研部</dd>
<dd>人事部</dd>
<dd>学工部</dd>
</dl>
释义： <dl></dl>: 定义列表<dt></dt>: 定义上层内容<dd></dd>: 定义下层内容

（2）有序列表标签
1.java学院
2.人事部

a.java学院
b.人事部

       i.java学院
      ii.人事部
<ol>
<li>java学院</li>
<li>人事部</li>
</ol>
释义：<ol></ol>: 定义有序列表
  ol标签排序方式属性type=1，a, i

（3）无序列表标签
       （特殊符号）java学院
       （特殊符号）人事部
       （特殊符号）学工部
<ul>
<li>java学院</li>
<li>人事部</li>
<li>学工部</li>
</ul>
释义：<ul></ul>: 定义无序列表
    type：设置特殊符号属性type=disc， circle ，square

4、图形标签
（1）标签：<img src="图片的路径名称"/>
（2）属性：src：图片的路径 width：图片宽 height：图片高 border：图片边框粗细
alt: 鼠标移动图片上面会显示文字（有些浏览器不支持），找不到图片则直接显示alt的内容

5、超链接标签（点击打开新内容）
（1）标签：<a href="hello.html">显示在页面上的内容</a>
（2）属性 href：链接到的地址 target：（默认当前页打开链接）_self,当前页面打开 _blank，在新标签页打开
（3）想要一个超链接没有效果，在href属性值写成#

6、表格标签（数据显示清晰，结构明确）
（1）标签：定义表格<table></table>
属性 border border color width height
cellspacing: 单元格间距 cellpadding: 文字和单元格间距

* 在table标签里面表示行： <tr></tr> 属性align（对齐方式）= left center right

* 在tr标签里面表示列： <td></td> 属性align（对齐方式）
* 在tr标签里面表示表头：<th></th> 自动实现居中和加粗
（2）合并单元格（td标签属性）rowspan：跨行 colspan：跨列

（3）标题标签：<caption>标题内容</caption>

7、表单标签（功能：网页输入的数据提交到服务器上的过程）
（1）form 标签：<form></form>
属性 action：提交的服务器的地址 method：表单的提交方式（get（默认）和post）
get提交：地址栏携带数据，安全性很差
post提交：地址栏不会携带数据，安全性较高，数据在请求体里面
例：<form action="hello.html" method="get"></form>

（2）输入项：
要求1：输入项里面必须要有name属性
要求2：在单选输入项、复选输入项、下拉输入项里面都需有属性value，设置其值

大部分输入项是通过标签input进行操作的
<input type="输入项的类型"/>
第一个：普通输入项 <input type="text"/>
第二个：密码输入项 <input type="password"/>
第三个：单选输入项 <input type="radio"/>（默认选中 checked="checked"）
在单条输入项里面必须有name属性，且name的属性值必须相同
第四个：复选输入项 <input type="checkbox"/>（默认选中 checked="checked"）

复选输入项内单个选项标签必须有name属性，且name的属性值必须相同
第五个：文件输入项，上传文件<input type="file"/>
第六个：隐藏项，值不会显示在页面上，但可以提交到服务器上<input type="hidden"/>
第七个：普通按钮 <input type="button"/> 可写value属性，设置输入项的默认值

（3）下面的两个输入项不是使用input标签进行封装的
第八个：下拉选择输入项   （属性 selected="selected" 默认选中）
* <select>
  <option>AAAA</option>
  <option>BBBB</option>
  <option>CCCC</option>
</select>

第九个：文本域 <textarea cols="10" rows="5"></textarea>

（4）提交按钮和其他的按钮
* 提交按钮： <input type="submit"/>属性 value=按钮显示内容

* 重置按钮：<input type="reset"/> 属性 value=设置重置按钮显示的内容（使表单输入项回到初始状态）
* 图片提交：<input type="image" src="图片路径"/>（类同于submit提交）

（5）若单元格里面无内容，使用占位符替代（使用空格 ）

8、其他的标签的使用
（1）pre：原样输出 p：段落标签 s：删除线 u: 下划线 b：加粗 i：斜体
（2）div : 自动换行 span：一行显示

tujunyong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html网页基础-标签

HTML1简介（1）概念：HyperText Mark-up Language 超文本标记型语言。完成对用户的网页显示功能！（2）准则：1：单个网页包含两部分：head和body 2：格式设置页面信息显示于页面的内容
复制链接

扫一扫