HTML

桃扇骨 2021-10-14 23:55 229阅读 0赞

# HTML #

![在这HTML里插入图片描述][HTML]  
[https://blog.csdn.net/weixin\_38421216/article/details/72757672?utm\_source=app][https_blog.csdn.net_weixin_38421216_article_details_72757672_utm_source_app]

# (一)Html简介 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU4NDU0NQ_size_16_color_FFFFFF_t_70]

# （二） html的文档结构 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU4NDU0NQ_size_16_color_FFFFFF_t_70 1]

# （三）META标记 #

META标记是html语言的head部分的一个辅助性的标记的，他位于head和title标记之间，他提供给用户不可见的信息。meta标记的用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie;可以用于来鉴别作者，设置页面格式，标注内容提要和一些关键字，还可以设置页面的自动刷新以及等级等等。

# （四）TITLE标记 #

在头部的<head></head>中，有另一组标签<title></title>。打在<title></title>这里面的文字会出现在浏览器视窗最上面蓝色部分里，作为网页的主题。
    实例：
    <title>这是我的html页面</title>

# (五) 文字上的分隔标记 #

或许你会发现这样一个问题：我们已经在记事本里排版排的很漂亮，为何通过浏览器查看是就变了样子，那是因为浏览器不像word,他不认识Enter键或者空格键，所以当你按多少次空格，浏览器都会当作没看见一样。
    常用的分隔标记：
                强制断行标记“<br>”
                强制分段标记“<p>”
                空格“&nbsp；”

# (六)排版的标记 #

1.文字的置左，置右，置中
          刚刚我们学过的分段标记“<p>”在加上一些简单的属性设定，就可以让其的文字置左，置右，置中。
    2.置中标记
     使用方法：
         <center>内容</center>
    3.保持原始数
    使用方法：<pre>内容<pre>据格式标记

# （七）字体标记 #

1.标题标记
    使用方法：<h1>内容</h1>
    2.设置字体标记
    使用方法：<font  size=“2”  color=“red”  face=“黑体”>内容</font>
    3.字体变化标记
    使用：在文字标记中，对于文字的格式也有相当多的变化，如加粗，斜体等等。
     <b></b>  加粗        <i></i>  斜体      <u></u>  底线
    <kbd>用粗体等宽字体显示文字</kbd>
    <var>用较小的固定宽度显示字体</var>

# （八）字体变化标记 #

使用：在文字标记中，对于文字的格式也有相当多的变化，如加粗，斜体等等。
    <dfn>用于名词解释，斜体显示</dfn>	
         <sup></sup> 上标      <smap>用于字母序列等宽</smap>
         <sub></sub>  下标
         
         <em></em>  强调	<address>模拟信封上的字体</address>
         <strong></strong>  加强
         <s></s>删除线    <strike>删除线</strike>
         <big>比默认字号大一号</big>
         <small>比默认字号小一号</small>
         <code>以等宽字体显示计算机程序代码</code>

# （九）背景标记 #

使用：<body bgcolor="red"  backgroud="bg.jpg">
        例子1：
       <html>
        <head><title>背景颜色</title> </head>
         <body  bgcolor="red">
         <font  size="4"  face="黑体"  color="red">背景颜色</font>
         </body> </html>
      例子2：
       <html>
        <head><title>背景颜色</title> </head>
         <body  background="bg.jpg">
         <font  size="4"  face="黑体"  color="red">背景图片</font>
         </body> </html>

# 分隔线标记 #

分隔线标记
        使用:上一部分<hr>下一部分
       例子：
    <html>
        <head>
         <title>背景颜色</title>
        </head>
         <body>
             abcdefg。<br>
         	<hr  color="red"  width="240"  size="2" noshade>
           higklmn。
         </body>
       </html>

# 标记 #

使用：<img  src="boy.jpg"  alt="haha" align="left" border="0"  height="56px" width="32px">
    例子：
    <html>
        <head>
         <title>图片</title>
        </head>
         <body>
           <img  src="boy.jpg"  alt="haha" align="left" border="0“   height="56px"        width="32px">
         </body>
       </html>
    说明：向网页中插入图片。

# 序列标记 #

1.无序列表< ul>
    2.有序列表 <ol>
    3.自定义列表 <dl>

# 特殊字符 #

html中有很多特殊的字符是需要特殊的处理。
       下面看几个特殊的字符处理：
    转义字符
         <   <        >    >         &   &           &qout;  “     空格
    例子：  <html>
        <head><title>特殊的字符</title> </head>
        <body>
          <<br>><br>&<br>  &qout;<br>
        </body>
      </html>

### 超链接 ###

1.连接到其他的文档
    2.网页的内部链接
    3.网页的外部链接
    4.图片的锚点链接

### 表格 ###

表格的结构
           1.<table>
                <table>...</table>是用来在html页面上创建表格的。
    	 2.<th>代表列名一般放在第一行
          3.<tr>代表格的一行。
          4.<td>用来定义表格的一列。
          在默认情况下，表格是没有边框的，如果想要出现边框，就是用border属性。
    表格的设置
    表格的合并

## input标签 ##

text -文本框
    button -按钮
    submit-提交
    reset-重置
    password -密码
    checkbox-多选
    radio-单选
    file -上传文件
    date - 选取日、月、年
    month - 选取月、年
    week - 选取周和年
    time - 选取时间（小时和分钟）
    datetime - 选取时间、日、月、年（UTC 时间）
    datetime-local - 选取时间、日、月、年（本地时间）
    写法：<input type = “text” value=“”/>

# input标签 #

4.1邮箱输入框
    <input type="email" name="user_email" />
    4.2数字输入框
    <input type="number" name="points" min="1" max="10" />
    4.3数字范围输入框（进度条）
    <input type="range" name="points" min="1" max="10" />
    4.4颜色选择框
    <input  type="color" name="colortext"/><br>

# 下拉列表及文本域 #

Select标签
    <select>
            <option   value="qxz"  selected/>请选择
            <option   value=“A”/>苹果
            <option   value=“B”/>香蕉
            <option   value=“C”/>橘子
            <option   value=“D”/>西瓜
       </select>
    
    TEXTAREA便签
    <TEXTAREA  ROWS="5" COLS="30"  ></TEXTAREA >

## 表单 ##

表单的用途
         表单在网页上用来给访问者填写信息的，从而获得用户信息，使用网页进行交互的功能。一般是将表单设计在一个html页面中，当用户填写信息后做提交操作，于是表单的内容就会从客户端的浏览器上发送给服务器，经过服务器上的jsp或者ASP或者Cgi等处理后，再将用户所需的信息传送给客户端的浏览器上，这样网页就具有交互性了。
    表单构成
         <form></form>
         <form></form>标记是用来创建一个表单，在标记之间一切都属于表单里的内容。
         <from>标记具有action，metnod,target属性。 action属性是处理处理程序的程序名称。method属性是用来定义处理程序的从表单中获取信息的方法，通常有两种分别是GET和POST两种。
          target属性用来制定目标窗口的。
    表单的工作原理
         1.访问者填写表单，并提交给web服务器处理；
          2.在web服务器上的后台处理程序对提交后的数据进行处理；
          3.后台处理程序处理完成后，会重新生成一个新的html页面发给客户端。

## 框架（frame） ##

混合框架
    <html>
     <head>
     <title>框架页示例</title>
     </head>
    <frameset rows="50%,50%">
    	<frame src="http://www.baidu.com">
    	<frameset cols="25%,75%">
    		<frame src="http://www.sina.com.cn">
    		<frame src="http://www.baidu.com">
    	</frameset>
    </frameset>
    </html>

# 多媒体标记音频 #

1、HTML4多媒体
             <embed src="文件源" width="宽度"    autostart="true"  loop="true">
             src        设置文件源
             width    设置宽度
             autostart   设置是否自动播放，如果是true就是自动播放，是flase不自动播放
             loop     设置是否循环播放true就是循环播放，false就是不自动播放
    2、HTML5多媒体
    <audio src="G:\Media\霍比特人3：五军之战.mp4" controls="controls"></audio>
    3、添加背景音乐
    <bgsound src="明月几时有.mp3" loop=5>

# 多媒体标记视频 #

视频标签
    <video src="G:\Media\霍比特人3：五军之战.mp4" width="320" height="240" controls="controls">
    </video>
    
    control 属性供添加播放、暂停和音量控件。
    Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。
    要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。
    video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。

# 层（div） #

层也可以添加事件和属性，请参考   第2节补充div+css3.txt
    <div style="color:#00FF00">
      <h3>This is a header</h3>
      <p>This is a paragraph</p>
    </div>

[HTML]: /images/20211015/01bf6369e462463f832a9b29b1af7fef.png
[https_blog.csdn.net_weixin_38421216_article_details_72757672_utm_source_app]: https://blog.csdn.net/weixin_38421216/article/details/72757672?utm_source=app
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU4NDU0NQ_size_16_color_FFFFFF_t_70]: /images/20211015/0b31c2a0c44b4761850c972775d1a1c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU4NDU0NQ_size_16_color_FFFFFF_t_70 1]: /images/20211015/2162d59f722c47d99f2fd773d973bf1d.png