超文本标记语言html

超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。下面是我学习html前半部分后作出的简单总结以及一些练习实例,鄙人才疏学浅,敬请大佬指正。

1、html基本格式

    <!DOCTYPE html>                    <!--声明文档解析类型-->
    <html>                            <!--根标签(开始)-->
    ​    <head>                        <!--头标签(开始)-->
    ​        <title>html基本结构</title> <!-- 整个页面标题 -->
    ​    </head>                        <!--头标签(结束)-->
    <body>                            <!--主体标签(开始)-->
    ​    <!--代码要缩进-->
    ​    <h1>我的第一个标题</h1>        <!--主题内容中的标题-->
    ​    <p>我的第一个段落</p>        <!--页面内容-->
    </body>                            <!--主体标签(结束)-->
    </html>                            <!--根标签(结束)-->

2、html标签

单标签:<br />
双标签:<标签名></标签名>

3、html属性

定义:用来完成对受控文字的某些特殊效果或功能。
html属性分为:属性名和属性值。

==属性名=属性值== 中间使用=分隔 属性值写在引号(单引号或双引号)里面。

     <a href="https://www.baidu.com/">百度一下</a>

html除了现有属性,还有自定义属性:

    <a href="https://www.baidu.com/" data-wm="pdsu.cn">百度一下</a>

属性名在html5里面加data-作为前缀后接一个或多个字母,属性值随便写,自定义属性默认不会对页面展示造成任何影响。

4、html元素

定义:从开始标签到结束标签所有代码。
html元素内容:从开始标签到结束标签之间的内容。
html元素分为:块级元素和内联元素
块级元素:占页面整行长度 <div></div>
内联元素:只占元素内容长度

<span></span>

5、html注释

    <!-- 被注释的内容 -->

为了给写代码的人看的。

6、html编码

非数字的进行编码。

(1)设置html文档所在文件编码
(2)在html文档中用标签指定浏览器使用某编码进行展示网页(指定与
html文件的编码相对应的编码即可)

==文件编码为utf-8在html中标签指定utf-8编码展示网页==
==文件编码为ansi在html中标签指定jb2312编码展示网页==
常用编码:utf-8或jb2312

    <head>
    <!-- 声明:utf-8国际编码 gbk jb2312中文编码 -->
    <meta charset="utf-8" />
    <title>页面标题</title>
    </head>

7、html常用标签

1、水平线

单纯水平线:<hr /> 类型:单标签

2、主题内容中的标题

    <h1></h1>        <!--一级标题-->
    <h2></h2>        <!--二级标题-->
    <h3></h3>        <!--三级标题-->
    <h4></h4>        <!--四级标题-->
    <h5></h5>        <!--五级标题-->
    <h6></h6>        <!--六级标题-->

类型:双标签

3、段落

<p></p> 类型:双标签

4、换行

<br /> 类型:单标签

5、空格

(1)&nbsp 不是标签,可以当做特殊字符。

(2)输入法用全角

6、无序列表

    <!-- 列表需要嵌套写法 -->
    <ul>
    ​    <li></li>
    ​    <li></li>
    </ul>

7、有序列表

    <ol>
    ​    <li></li>
    ​    <li></li>
    </ol>

子元素,父元素,后代元素,兄弟元素

8、定义列表

    <dl>
    ​    <dt></dt>
    ​    <dd>

    ​    </dd>    
    </dl>

类型:块级元素

9、插入图片

    <img src="" alt="" width="" height="" />

属性src里填图片路径
图片路径分为:绝对路径和相对路径<!--相对路径:相对于当前html文件路径-->

==./当前目录../上一级目录==
==在当前目录建一个文件夹:images 将所展示图片都放在里面==

属性alt里填图片说明
属性width里填图片长度:也可以用百分比表示
属性height里填图片高度:也可以用百分比表示
类型:内联元素
实例

    <img src="images/1.jpg" alt="二哈" width="200" height="100"/>

10、超链接

    <a href="https://www.baidu.com/" title="鼠标悬停显示" target="_blank">百度一下</a>

属性href:需要连接的网址,网站建设初期用#链接表示空链接

属性title:鼠标悬停显示

属性target:设置_blank,在新窗口打开链接地址

类型:内联元素

11、指定图片某块区域加超链接

(1)为map标签加上id属性,定义一个唯一属性
(2)为保证兼容性加name属性,属性值与id值相同
(3)为map标签所作用图片img标签加usemap属性,属性名为#id名称
(4)在map标签内嵌套area标签实现给指定区域加链接

    <area shape="" coords="" href="" alt="" />

属性shape:定义链接区域形状,常用值rect(矩形)circle(圆形)
属性coords:确定区域精确位置,填坐标<!--以左上角为原点-->
属性href:链接地址
属性alt:链接说明

12、link标签

放置在头标签head内的用于链接外部css文件、链接收藏夹图标(favicon.ico)
最常见用途:链接外部样式表

属性href 值为外部资源地址,这里是css地址
属性rel 定义当前文档与被链接文档之间关系,值为icon、stylesheet、next、help、author、alternate、licence、search、tag、prev、sidebar
这里是外部css样式 即stylesheet
属性type 规定被链接文档MIME类,值为text/css

13、div容器

div标签可以看成存放标签的容器 类型:块级元素

14、span内联元素

组合内联元素,以便css美化

15、表格

实例

    <table border="1" cellpadding="2" cellspacing="1">
    ​    <tr>
    ​        <th>姓名</th>
    ​        <th>学号</th>
    ​        <th>年龄</th>
    ​        <th>成绩</th>
    ​    </tr>
    ​    <tr>
    ​        <td>小王</td>
    ​        <td>133</td>
    ​        <td>19</td>
    ​        <td>100</td>
    ​    </tr>
    </table>

table标签
属性:border 作用:规定表格边框宽度
属性:cellpadding 作用:规定文字和边框的间距
属性:cellspacing 作用:规定每个单元格边框宽度
tr标签:html表格中的行
th标签:表格内表头单元格
td标签:表格内普通单元格
常用属性:
colspan:规定单元格可横跨列数,值为数字
rowspan:规定单元格可横跨行数,值为数字

16、表单

表单提交实例1

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>html表单提交</title>
        </head> 
    <body> 
        <h1>账户登录</h1>
        <form name="submit" action="https://www.baidu.com/" target="_blank" method="get">
            <!-- 由于表单提交需要进行数据处理,html语言无法实现,暂且写成向百度提交数据 -->
            账号:<input name="text" type="text" size="20" />
            <br />
            密码:<input name="password" type="password" size="20" />
            <br />
            <input type="submit" value="确认登录" />                                  
           &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
           &nbsp&nbsp&nbsp&nbsp&nbsp
            <input type="reset" value="清空" />
        </form>
    </body>    
    </html> 

1、标签<form>:定义供用户输入的html表单

属性:
action:规定提交表单向何处发送表单数据
name:表单命名
target:_blank在新窗口打开
method:提交方式,get或post值
类型:双标签

2、<input>标签:定义表单输入页面

<!-- 通过type属性展示不同输入页面,通过value改变默认值 -->
(1)普通文本框:
    <input type="text" />
(2)密码框:
    <input type="password" />
(3)文件上传:
    <input type="file" />
(4)隐藏的input:
    <input type="hidden" />
(5)普通按钮:
    <input type="button" />
(6)单选:
<input type="radio" />  <!--通过相同name属性实现单选-->

实例

      <input type="radio" name="sex">男<input type="radio" name="sex">女
(7)复选框:
    <input type="checkbox" />
(8)提交:
    <input type="submit" />
(9)重置:
    <input type="reset" />

属性placeholder 可用值text:规定帮助用户填写输入字段提示
属性checked 可用值checked:用于选择页面(单复选),实现默认选择
属性disabled 可用值disabled:使标签不可用
属性name:给input输入界面起名字
属性readonly 可用值readonly :使输入界面为只读状态
属性size 值为数字:设置输入框长度
属性value:该属性值为input提交到页面的数据,可通过该属性设置默认值

3、textarea标签:定义多行输入框

    <!--双标签,默认值写标签之间-->

属性cols 值为数字
属性rows 值为数字
也可使用disabled name readonly属性
实例

    自我介绍:<textarea cols="20" rows="10"></textarea>

4、label标签:提升用户体验

标签for属性与input的id属性相同

5、select标签:配合option实现下拉菜单

可用属性:disabled name multiple

    <select>
    ​    <option></option>
    </select>

6、option标签

可用属性:disabled select value

7、optgroup标签

    <!--把相关选项组合在一起-->

属性label:给选项组命名
属性disabled:停用该选项组
实例

       <select>
            <optgroup label="河南省">
            ​    <option value="周口">周口</option>
                <option>郑州</option>
                <option>洛阳</option>
            </optgroup>
        </select>

表单提交实例2


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="../../favicon.ico">
    <title>表单提交练习</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet" />
    <link href="signin.css" rel="stylesheet" />
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>
  </head>
  <body>
    <div class="container">
      <form class="form-signin" name="submit" target="_blank" method="get">
        <h2 class="form-signin-heading">表单提交</h2>
        <input type="text" id="inputText" class="form-control" placeholder="text" />
        <br />
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" />
        <br />
        <input class="btn btn-lg btn-primary btn-block" type="submit" value="立即提交" />
      </form>
    </div>
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 qwzf1024@qq.com

×

喜欢就点赞,疼爱就打赏