HTML学习

最新推荐文章于 2019-02-27 19:49:27 发布

2a3b4c

最新推荐文章于 2019-02-27 19:49:27 发布

阅读量206

点赞数

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

本文链接：https://blog.csdn.net/lr1916417519/article/details/85700065

版权

Web 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

HTML

超文本标记语言 hyper text markup language
俗称网页
html超文本标记语言格式如下：

<html>
    <head>
        子标签
    </head>
    <body>
        子标签
    </body>
</html>

【1】head中常见标签

后缀名必须是 *.html或者 *.htm

<title>网页标题</title>

上面title标签指的是网页标题

<meta charset="字符编码">

meta标签值的是告诉浏览器请用这个字符编码显示网页内容

<script></script>\

script标签用来包含网页的脚本

<link>

link是单标签用来包含外部样式表

【2】body中的标签

1)标题标签

<h1>一号标题</h1>
<h2>二号标题</h2>\
...
<h6>六号标题</h6>

2)正文标签

段落标签

<p>段落1内容</p>
<p>段落2内容</p>

换行标签(单标签)

<br>

分割线标签(单标签)

<hr>

特殊文字的转义显示

例如：
< <
> >
©显示版权信息
& &

3)超链接显示(有下划线)

文字链接

<a href="链接地址">链接文字</a>

两个网页在同一目录下时，直接写文件名
若两个网页不再同一目录下时，需要加上文件路径

<a href="Demo.html">第二个网页</a>

链接地址是空串的话代表本地

图片链接

图片标签

<img src="图片地址" width="宽度" height="高度">

这里的宽度和高度的单位都是像素

让图片有链接功能

<a href="链接地址"><img src="图片地址"></a>

页面内的链接(锚)

首先在目的标签添加 id=“唯一编号”，然后在超链接的 href="#唯一编号"
Eg:网页底部回到顶部

页面顶部<h1 id="t1">标题1</h1>
给目的地添加一个唯一编号id，id值不能重复
页面底部<a href="#t1">回到顶部</a>
       <a href="#t2">跳到标题2</a>

4)列表标签

有序列表

<ol>有序列表1
    <li>列1</li>
    <li>列2</li>
    <li>列3</li>
    <li>列4</li>
</ol>
<ol>有序列表2
    <li>列1</li>
    <li>列2</li>
    <li>列3</li>
</ol>
<ol>有序列表3</ol>

有序列表的每一列都是由浏览器自动加上编号的

无序列表

<ul>无序列表1
    <li>列1</li>
    <li>列2</li>
    <li>列3</li>
    <li>列4</li>
</ul>
<ul>无序列表2
    <li>列1</li>
    <li>列2</li>
</ul>

无序列表的每一列都是由浏览器自动加实心点

5)表格标签（*）

<table>
    <thead></thead> <!-- 头 -->
    <tbody> <!-- 体 -->
        <!-- tr 代表行 -->
        <tr> 
            <!-- td 代表列 -->
            <td></td>
            <td></td>
        </tr>  
    </tbody>
    <tfoot></tfoot> <!-- 脚 -->
</table>

快捷键：table>(thead>tr>td3)+(tbody>tr3>td*2)+tfoot
表格合并单元格，可以使用td的属性
colspan(合并列) rowspan(合并行)
Eg:

<table>
    <thead>
        <tr>  <!--居中且粗体-->
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr><!--tr代表表行-->
            <td> <!--td代表列-->1</td>
            <td>李四</td>
            <td>男</td>
            <td>24</td>
        </tr>
        <tr><!--tr代表表行-->
            <td> <!--td代表列-->1</td>
            <td>王五</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr><!--tr代表表行-->
            <td> <!--td代表列-->1</td>
            <td>张三</td>
            <td>男</td>
            <td>44</td>
        </tr>
    </tbody>
    <tfoot></tfoot> <!--表尾-->
</table>

6)表单标签（*）

作用:接受用户的输入
form标签把填写的信息收集起来发送给服务器，有name属性的表单，会把信息发送给服务器。

<form action="http://www.baidu.com">
 <!--action服务器地址-->
    <input type="text">  <!--文本框-->
    <br>
    <input type="password"> <!--密码框不回显-->
    <br>
    <input type="button">   <!--按钮-->
    <br>
    <input type="radio" name="sex" checked>女
    <input type="radio" name="sex">男  <!--单选框-->
    <br>
    <input type="checkbox" name="hobby" value="1">唱歌<!--多选框-->
    <input type="checkbox" name="hobby" value="2">跳舞
    <input type="checkbox" name="hobby" value="3">篮球
    <br>
    <input type="file"><!--文件上传和下载框-->
    <br>
    <input type="data" value="2019-1-3">  <!--可以用value给定初值-->
    <input type="reset" value="重置">  <!--重置表单-->
</form>

7)iframe

在一个页面里内嵌另一个页面

<iframe src="http://www.baidu.com" width="100%"  height="500"></iframe>

8)给网页加视频

<video src="1.mp4" controls></video>

controls加播放键
用flash有安全漏洞，推荐使用video

2a3b4c

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML学习

文章目录HTML【1】head中常见标签【2】body中的标签1）标题标签2)正文标签段落标签换行标签(单标签)分割线标签(单标签)特殊文字的转义显示3)超链接显示(有下划线)文字链接图片链接图片标签让图片有链接功能页面内的链接(锚)4)列表标签有序列表无序列表5）表格标签（*）6）表单标签（*）7)iframeHTML超文本标记语言 hyper text markup language俗称...
复制链接

扫一扫