1-HTML基础_html tite-CSDN博客

本文链接：https://blog.csdn.net/weixin_43717779/article/details/98469944

HTML基础

网页文件结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
	</body>
</html>

网页最开始的标签是是声明当前文档是个网页文档。

<html>是网页的根标签。

<head>网页的头标签。

<tite>是网页的标题。
设置网页的中文：
<meat charset="utf-8"/>

双标签：

<标签名></标签名>

单标签：

<标签名 />

标题标签`<h>`：

标题标签用于设置标题：

<h1 align="center">一号标题</h1>
<h2 align="right">二号标题</h2>
<h3 align="left">三号标题</h3>
<h4 dir="rtl">四号标题</h4>
<h5>五号标题</h5>
<h6>六号标题</h6>

网页中h1-6;

align用于设置水平排列：

center：水平居中；
right:居右；
left：居左。

dir全称direction指方向，

rtl：从右向左排列；
ltr：从左向右排列

字体标签`<font>`:

<font color="red" face="微软雅黑" size="1">今天天气不错，学生很帅也很漂亮</font>

color：设置字体颜色；
foce：用于设置字体样式（后css用font-family）；
size:用于设置字体字号

特殊文字样式

样式	代码
加粗	`<b><strong>`
下划线	`<u>`
斜体	`<i><em><cite>`
删除线	`<strike><del>`
版权标志	`©`
商标标志	`®`
上角标	`<sup>`
下角标	`<sub>`

有序列表

<ol type="A">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
</ol>

有序列表它是一对父子标签，它是通过ol与li组合完成
里面的每一项都是通过li来标记完成的
通过在type上面设置类型，可以把li每一项前面的序号改变掉

无序列表

<ul type="square">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
</ul>

数据列表

<dl>
    <dt>男生</dt>
    <dd>李文滔</dd>
    <dd>标哥</dd>
    <dd>张成</dd>
    <dt>女生</dt>
    <dd>黄淑玲</dd>
    <dd>李新月</dd>
    <dd>黄静</dd>
</dl>

<>![在这里插入图片描述](https://img-blog.csdnimg.cn/20190804152315186.png) #### 列表扩展

<details>
    <summary>男生</summary>
    <ol>
        <li>李文滔</li>
        <li>标哥</li>
        <li>张成</li>
    </ol>
</details>

<details>
    <summary>女生</summary>
    <ul>
        <li>黄淑玲</li>
        <li>李新月</li>
        <li>黄静</li>
    </ul>
</details>

[外链图片转存失败(img-OTFcm1z1-1564903273488)(E:\自己的宝贝\01HTML+CSS\assets\1562320560113.png)]

通过点击上面的男生或女生，可以展开详细信息

summary是用于设置标题的

ul则是展开以后的内容

单标签

只出现一次的，我们叫单标签

<标签名 >  这是html5的标准
<标签名 />  这是xthml的标准（老的标准）

线条标签

我们使用hr来进行

<hr width="300px" align="left" size="7" color="red" />

换行标签

<br />

图片标签

<img border="10" hspace="100px"  vspace="50px" title="这是标哥的笔记图片" src="img/1.jpg" width="100px" height="100px" alt="笔记图片">

src指图片地址
width/ height设置图片大小
alt当图片显示不出来的时候，这段文字就是显示出来，它是一个提示文字
title鼠标放上去以后的提示信息
hspace距离左边的距离
vspace距离上边的距离
border图片的边框

上面的属性当中，常用的就两个,一个src，再一个alt,其它的后期都会通过CSS来进行

表单元素

只要在网页当中需要我们去填写的东西，我们叫表单元素

input标签

input标签是网页上面的输入框元素，它提供一个输入框让用户输入相关的信息

文本输入框

<input >

上面的输入如果不加任何type属性则代表文本输入框，其实它默认有一个属性值

<input name="userName" type="text" placeholder="请输入内容" >

密码输入框

<input name="pwd" type="password" placeholder="请输入密码" autofocus="autofocus">

文本输入框与密码输入框还有一些共同的属性，我们看一下，有哪些

placeholder占位符属性，当用户在里在输入了内容以后，占位符不显示，如果为空，则显示出来，提示给用户看
autofocus当页面加载的时候，自动获取光标，但要注意，一个表单里面，只能有一个元素使用这个属性，不能多个表单元素一起使用
name属性主要用于后端开发的时候使用与后端语言进行交互的时候（Java，php,python等），后台需要取值的时候使用

数据输入框

<input type="number"  value="10" step="5" max="30" min="5" name="age"/>

value代表当前值
step代表每次增加或减少的值
max最大值，min最小值

日期与时间

<input type="date" />
<input type="time" />
<input type="datetime-local" />

滑块

<input type="range" min="0" max="100" step="10" />

step每次改变的值的大小
min最小值，max最大值

还有type=“url” tpye="email"等，因为兼容性问题，此处不做要求

除上上面的几种输入型的表单以后，还有一些选择型的表单元素

单选按钮

性别：<hr />
<input type="radio" name="a" checked id="nan"/>
<label for="nan">
    男
</label>

<input type="radio" name="a" id="nv" />
<label for="nv">
    女
</label>

label标签一般与单选标签结合起来一起使用
如果默认某一个要选中，则使用 checked属性
单选按钮如果要进行编组，则需要把它们的 name值的属性设置为一样
label的for属性指向radio的id名

多选按钮

爱好：<br />
<input type="checkbox" name="hobby" id="reading" />
<label for="reading">
    看书
</label>
<input type="checkbox" name="hobby" />睡觉
<input type="checkbox" name="hobby" checked/>打篮球
<input type="checkbox" name="hobby" />玩游戏
<input type="checkbox" name="hobby" />逛街
<input type="checkbox" name="hobby" checked />扯淡

多选按钮与单选按钮在此处的用法相同，都是通过checked来进行默认选中，都是通过label标签来进行组合，同样也是通过name来进行编组

下拉选项框

籍贯：<br />
<!--
	size="7" multiple="multiple"
-->
<select size="7" multiple="multiple">
    <optgroup label="南方">
        <option>湖北省</option>
        <option selected>广东省</option>
        <option>福建省</option>
        <option selected>湖南省</option>
        <option>去南省</option>
        <option>广西省</option>
    </optgroup>
    <optgroup label="北方">
        <option>内蒙古</option>
        <option>河北省</option>
        <option>山东省</option>
        <option>河南省</option>
        <option>黑龙江</option>
        <option>辽宁省</option>
        <option>吉宁省</option>
    </optgroup>
</select>

下拉选择框是一个组合标签，它通过与option的结合来进行使用，option代表每一个选项
option如果默认要选中某一个则使用 selected
size属性可以设置这个选项一次性显示多少个
multiple这个属性代表多选
optgroup标签可以将 option选项进行分组，以方便用户选择

按钮标签

在网页里面，按钮主要是以下几种情况

<input type="button" value="我要注册账号" />
<input type="submit" />    <br />
<input type="reset" />

type="button"它只是一个普通按钮
submit默认会有一个中文名称叫提交

这个按钮会把你刚刚填写的当前表单里面的数据默认提交到浏览器地址栏，这个时候后台程序是可以接收到你刚刚提交的值
重置对当前表单里面的内容进行恢复初始化

<form>
    <input name="userName" type="text" placeholder="请输入用户名" /><br />
    <input name="pwd" type="password" placeholder="请输入密码" /><br />
    <!--<input type="reset" />
像这种情况下的按钮，它的局限性非常高，如果没有CSS，那么，它就太单一了
-->
    <!--复合形式的按钮 -->
    <button type="reset">
        <font color="red">
            <b>
                <i>重置</i>
            </b>
        </font>
        <img src="img/03.png" />
    </button>
</form>

这种情况下面的button它是一个双标签，正是因为是一个双标签，所以，它可以根据不同标签来组成不同的样式与结构，我推荐大家使用此标签

文本域标签

input type="text"它只是一个单行的输入框，解决不了输入大段文字的需求，这个时候，我们就需要使用另一个标签来替代，这就是文本域标签

<textarea rows="10" cols="50"></textarea>

rows指代行数，cols指代列数

上面的标签是一些常见的表单元素标签，其中还有一些公共的属性给大家列举一下

表单元素公共属性

value属性，每个表单元素都有一个value属性，用于设置或获取这个表单元素的值
readonly属性，设置表单元素为只读
disabled禁用当前表单元素
required必填项（具有兼容性，IE低版本不支持），用于指定在提交表单的时候，当前项是否必填

扩展

marquee标签
属性 hidden 隐藏，属性contenteditable内容可编辑,draggable可拖动