HTML 标签

最新推荐文章于 2024-08-12 21:45:00 发布

jingerh126

最新推荐文章于 2024-08-12 21:45:00 发布

阅读量349

点赞数 1

分类专栏： Web 文章标签： html标签

本文链接：https://blog.youkuaiyun.com/jingerh126/article/details/102585129

版权

Web 专栏收录该内容

40 篇文章

订阅专栏

一、什么是 HTML (Hyper Text Markup Language)

HTML 指的是超文本标记语言，标记语言是一套标记标签，不是编程语言，HTML 使用标记标签来描述网页。
*http：超文本传输协议。
*DNS: 域名解析服务器。
常用的域名后缀的意义：

域名	说明
.cn	中国的域名，即国内域名
.com	国际域名，盈利性商业组织、公司
.org	非盈利组织
.gov	政府组织网站
.edu	教育性组织机构
.mil	军事机构
.net	网络服务商
.int	国际组织

二、HTML的结构

<html>
	<head>
	    <meta charset="UTF-8">        //字符编码：utf-8是国际编码，gbk是中国编码
		<title>这是一个测试</title>
	</head>
	<body>
		测试
	</body>
</html>

webstorm中快捷键：

快捷键	说明
alt+F2	显示浏览器选项
按alt键同时单击	在不同地方输入相同文字
ctrl+D	复制
输入lorem按tab键	添加测试文本
输入p*n 按tab键	输入多行标签P

三、HTML中的标签

1. h 标签（h1~h6）

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

运行结果：对于hn，n越大，字越小
在这里插入图片描述

2. p 标签

<p>Lorem ipsum dolor sit amet, consectetur ad</p>

运行结果：
在这里插入图片描述

3. a 标签

a. 两个属性的含义：
href: 链接或者跳转的目标地址。
------相对路径：从当前目录开始的。
------绝对路径：从根目录开始的。
target: 打开目标窗口。
------_blank 在新窗口打开；
------_parent 在原窗口打开。

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

运行结果：
在这里插入图片描述
b. 其他应用：锚记和邮箱

跳转情况	方法
跳转到同一个页面的不同位置	在跳转位置处添加一个锚记《a name=“名称”》《/a》名称；创建链接《a href=“#锚记名称”》点击内容《/a》
跳转到不同页面的不同位置	在跳转位置处添加一个锚记《a name=“名称”》《/a》；创建链接《a href=“文件名#锚记名称”》点击内容《/a》
跳转到邮箱	《a href=“mailto:邮箱地址”》点击内容《/a》

4. hr 水平线

 <hr width="50%" color="blue" size="5px"/>

三个属性： width=“线的宽度”， color=“颜色” ，size=“粗细”

5. 注释

 <!--注释文本-->

快捷键：ctrl+/

6. 换行

 <br/>

7. 空格

方式一：

&nbsp;

方式二：
全角状态下空格
方式三：

<pre></pre>           //预格式化：网页上输出的格式和编写的格式一样

8. 文本格式标签

我是小语
//斜体 
<em>我是小语</em>              // 有强调的作用
<i>我是小语</i>
//加粗
<b>我是小语</b>  
<strong>我是小语</strong>     // 有强调的作用
//删除线
<del>我是小语</del>
//字体放大
<big>我是小语</big> 
//字体缩小 
<small>我是小语</small>

运行结果：
在这里插入图片描述

//上标
a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup><br/>
//下标
h<sub>2</sub>so<sub>4</sub><br/>
//预格式化
<pre>还是飞机         返回数据发 说</pre><br/>
//放置代码!
<code>
    var a="jsfsk";
</code>

运行结果：
在这里插入图片描述
pre 标签： 标签里的内容会按原格式输出到网页上。
code标签： 标签里的代码会输出在网页上，不会被浏览器解析。

9. img图片

 <img src="1.jpg" alt="苹果" title="这是一个苹果" width="100px" height="100px"/>

在这里插入图片描述
五个属性： src=“图片地址”，alt=“图片不显示时显示的文字” ，title=“鼠标悬浮到图片时鼠标旁边的文字”，width=“图片宽度”，height=“图片高度”
图片格式： jpg png gif webp

10. table 表格

<table border="1px" cellspacing="5px" cellpadding="5px" width="200px" bgcolor="red" align="center">
<caption>表头</caption>
 <tr>
	<th>标题行</th>
	<th>标题行</th>
</tr>
 <tr>
	<td>单元格</td>
	<td>单元格</td>
</tr>
</table>

运行结果：
在这里插入图片描述
属性： border=边框线 cellspacing= 单元格间距 cellpadding= 单元格填充 width=表格宽度 bgcolor=背景颜色 align=表格的对齐方式

跨行跨列属性： rowspan colspan

<table border="1px" cellspacing="0"  cellpadding="0" width="200px" >
    <caption>表头</caption>
    <tr   >
        <th colspan="2">1</th>
    </tr>
    <tr>
        <td rowspan="2" >1</td>
        <td >1</td>
    </tr>
    <tr>
        <td>1</td>
    </tr>
</table>

运行结果：
在这里插入图片描述

11. 列表

无序列表

<ul type="disc">
    <li type="circle">苹果</li>
    <li type="square">西瓜</li>
    <li>草莓</li>
</ul>

运行结果：
在这里插入图片描述
type: disc默认实心圆 square方块 circle 空心圆
有序列表

<ol type="1" start="3">
    <li>苹果</li>
    <li>西瓜</li>
    <li>草莓</li>
</ol>

运行结果：
在这里插入图片描述
type: 符号类型有 1 a A i I
start: 符号的起始位置
自定义列表

<dl>
    <dt>星期二</dt>
    <dd>每一周的第二天</dd>
    <dd>每一周的第二天</dd>
    <dt>星期二</dt>
    <dd>每一周的第二天</dd>
</dl>

运行结果：
在这里插入图片描述
总结： dt 是标题行，dd 是对dt行的解释，且dt和dd行可写多个

12. form 表单

<form action="提交的目标地址" method="get/post">
      <p><lable for="username">用户名：</lable><input type="text" id="username"/>
      </p>
      <p>密码：<input type="password"/></p>
      <p>性别：<input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女</p>
      <p>爱好：<input type="checkbox"/>唱歌 <input type="checkbox"/>跳舞</p>
      <p>上传文件：<input type="file"/></p>
      <p>出生日期：<select name="" id="">
                          <option value="2001">2001</option>
                          <option value="2002" selected>2002</option>
                          <option value="2003" disabled>2003</option>
                  </select>年
                  <select name="" id="">
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                  </select>月
                  <select name="" id="">
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                  </select>日

      </p>
      <p>
          职称：<select name="" id="" multiple="multiple" size="2">
                      <option value="初级">初级</option>
                      <option value="中级">中级</option>
                      <option value="高级">高级</option>
                </select>
      </p>
      <p>留言：<textarea name="" id="" cols="30" rows="5"></textarea></p>
      <p>
          <fieldset>
           <legend>个人信息</legend>
           姓名
           年龄
          </fieldset>
      </p>
      <p>
          <input type="submit"/>
          <input type="reset"/>
          <input type="button" value="确定"/>
          <button>确定</button>
      </p>
</form>