html——超文本传输语言

最新推荐文章于 2022-08-29 16:47:42 发布

mindDJX

最新推荐文章于 2022-08-29 16:47:42 发布

阅读量628

点赞数

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

本文链接：https://blog.csdn.net/mindDJX/article/details/116129963

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、HTML是什么？
二、举例

前言

一、HTML是什么？

1.概念

HTML（Hypertext Markup Language）是用来标记的一种语言。
超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

标记语言: 标记（标签）构成的语言。

2.标签与属性

什么是标签:：
是由一对尖括号包裹的单词构成 例如: <html> *所有标签中的单词不可能以数字开头.
标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体.
有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/><hr/><input/><img/>
标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>
标签的属性：
通常是以键值对形式出现的. 例如 name="nick"
属性只能出现在开始标签 或 自闭和标签中.
属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="nick"
如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly

3.最基本的html

在这里插入图片描述

4.标签分类

标签类别	标签名称	标签功能
内联标签	（b \ i \ u \ s \ button \img \span）	不独占一行，内联标签只能嵌套内联标签
块级标签	(h1----h6 \ br \hr \p div\ )	自己独占一行，块级标签自己嵌套内联标签或者嵌套某些块级标签

二、举例

1.列表标签

列表标签	功能
无序标签	ul
有序标签	ol

		<ul type="cricle">
			<li>student</li>
			<li>class</li>
			<li>name</li>
		</ul>
		<ol type="a">
			<li>a</li>
			<li>b</li>
			<li>c</li>
		</ol>

2.标题列表标签

		<dl>
        <dt>菜单1</dt>
        <dd>哗哗&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;的流</dd>
        <dt>菜单2</dt>
        <dd>&lt;哗哗的淌&gt;</dd>
   		</dl>

3.特殊字符

		空格：&nbsp
		<:&lt;
		>:&gt;
		版权表示符号：&copy;

4.表格标签

属性：
border：边框的宽
cellpadding：文字和内边框距离
cellspacing 内变框和外边框距离

<table border="1" cellpadding="10" cellspacing="22">
        <theah>
            <tr>
                <th>name</th>
                <th>age</th>
                <th>hobby</th>
            </tr>
        </theah>
        <tbody>
            <tr>
                <td>zhangsan</td>
                <td>18</td>
                <td>playing</td>
            </tr>
        </tbody>
		</table>

5.from表单标签

属性：
input用户输入或者选择的标签
action提交的路径
input标签：type属性—控制输入框的样式
name携带数据的key key：value
value:选择提交数据的值

在这里插入代码片

6.input标签的其他属性

check默认选中：
women

	readonly属性：设置用户名和密码只读不能更改
	disabled
	
	readonly:只读针对输入框 text password
	disabled不允许操作  所有的input都可以设置
	设置了readonly的标签，它的数据可以提交
	设置了disabled不能提交到后台

7.select标签：下拉选择框

<select name="city" id="" >
            <option value="1" >beijing</option>
            <option value="2" selected>shanghai</option>
            <option value="3">tianjin</option>
        </select>
</form>

8.label:标识标签的功能

效果：点击label标签就能到相对应得光标

	方式1：
	<label for="username">用户名 </label>
    <input id= "username"type="text" name="username" >
	方式2：
	<label >	
	用户名：<input type="text" name="username" >
	</label>