html基础

最新推荐文章于 2023-12-06 15:01:12 发布

XIAO_YuBaby

最新推荐文章于 2023-12-06 15:01:12 发布

阅读量334

点赞数

分类专栏： html+css 文章标签： html基础知识点

本文链接：https://blog.csdn.net/XIAO_YuBaby/article/details/96914473

版权

html+css 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

html基础知识_1

1.html快捷键用法

1. ctrl+s            保存
2. ctrl+c            复制
3. ctrl+v            粘贴
4. ctrl+z            撤销文本（上一步）
5. ctrl+y            重做文本（下一步）
6. ctrl+d            复制选中行
7. ctrl+shift+/      块注释
8. ctrl+a            全选文本
9. ctrl+x            剪切文本
10.f12              （检查）html在谷歌浏览器下可检查代码
10. f5               刷新网页
11. Lorem+tab        html中的测试文字
12. shift+空格        切换全角半角
13. body+tab         <body></body>
14. ul>li*4          ul中包含4个li

2.html基本结构

UTF-8 国标编码
html基本结构

3.标签

3.1 双标签

标签	样式	属性
`标题`	<h1></h1>	h1到h6标题字体大小依次递减
`段落`	<p></p>	块级元素
`超链接`	<a href = “链接” target = “_blank(新窗口)/_parent(原窗口)”> 名字	锚记
`加粗`	① <strong> </strong> ② <b></b>	加粗
`倾斜`	① <i></i> ②<em></em>	倾斜
`下划线`	<u></u>
`删除线`	<del></del>	~~删除线~~
`下标`	<sub></sub>	H₂SO₄
`上标`	<sup></sup>	A²

锚记

锚记定义:跳转至相同/不同页面的不同位置
锚记定义位置名称 <a id =" name "><a>(定位的地方)
链接<a href="文件名#name(跳转到相同页面)"> 链接名</a>
链接<a href="#name(跳转到不同页面)"> 链接名</a>

发邮件

<a href="mailto:邮箱地址"></a>
邮件地址是收件人的地址。点击变迁中的字后跳转到windows自带的一个可发送邮箱的地方（只能跳转到windows自带的，且前提是电脑装了该邮箱）

3.2 单标签

标签	样式	属性
`图片`	<img scr=“图片路径” alt=“” target="" width="" height="" title=""/></img>	图片格式: jpg png gif webp
`换行符`	<br>
`水平线`	<hr width=“50%”>	50%表示水平线变一半
`预格式化`	<pre>	保留文本中的空格等

图片注意事项

设置图片宽高时：
① %：当页面大小变化时，或者父标签变化时，图片宽高会变化
② px：设置多大就是多大，与页面大小无关，即页面伸缩时，图片宽高不变。

给图片加超链接，可以用一个a标签包起来

常用的图片格式：.jpg .png .gif .webp
①小的动图用gif
②图片像素比较高、较鲜艳时用jpg
③一般做背景图片用png
④webp格式的图片只有网页可以解析（手机端不可）

<img alt=" "/>中alt属性的作用
①当鼠标放到图片上的时候，会出现alt后的内容（该作用和img中的title属性作用相同）
②当图片未在浏览器显示时，会用alt后的文字代替图片
③当在网页中搜索关键字搜索图片时，会与alt后的内容匹配

4.列表

	定义	表示	代码
无序列表	没有序号的列表,但前边有标记符号，符号用type设计	`<ul type="disc(实心圆)/squre/circle(空心圆)"></ul>`	`<ul> <li></li> </ul>`
有序列表	有序号的列表,用type设置序号:`1,A,a,I,i`,用`start`属性设置第一个标记是从第几个字符/数字开始的	`<ol type="a" start="3" ></ol>`	`<ol> <li></li> </ol>`
自定义列表	dt中的内容是dd内容的概述(标题)，dd中为内容，用dl包住dd和dt	`<dl> <dt></dt> <dd></dd> </dl>`

5.表格

<table>                       /* 用table包住tr，th，td */
<caption>表格标题</caption>    /*  表头 */
	<tr>                      /* tr为行 */
		<th></th>             /* th为表头第一行单元格，加粗且居中 */
	</tr>
	<tr>
		<td></td>             /* td为单元格 */
	</tr>
</tablle>

表格属性

属性	作用
border	边框线
width	宽度
cellpadding	字与单元格边框的距离
cellspacing	单元格之间距离
rowspan=“2”	跨2行合并（上下）
colspan=“2”	跨2列合并（左右）

6.表单

提交的方式有 post/get

<form action = " 将form内容提交的目标地址 " method=" 提交的方式 ">
</form>

6.1 表单元素

代码	描述
`<label for"name"></lable>`
`<input type=”text” id="name"/>`	单行文本框
`<input type=”password id="name" ”/>`	密码框
`<input type=”radio id="name"”/>`	单选项
`<input type=”checkbox” id="name" checked（默认选中）/>`	复选框
`<input type=”number min="最小数" max="最大数" id="name"”>`	数值类型
`<textarea cols=“列数” rows=“行数 style=“resize:none(禁止框拉大拉小)”></textarea>`	多行文本框
`<input type="submit"/>`	提交按钮(默认文字)
`<input type="reset"/>`	重置按钮(默认文字)
`<button>取消</button>`	自定义按钮

`<input type="button" value="确定"/>`	自定义按钮

注意

<label for="username">昵称：</label><input type="表单类型" id="username">

在上述例子中，label标签的for属性取值和input标签的id属性取值相同，代表两者关联。
在后端解析代码时，是根据input的id或者name去寻找数据的。label是给屏幕解析器用的。

属性

required 必填项
placeholder 提示信息
maxlength 最大长度(任何类型文本框都有)
size 可见宽度(任何类型文本框都有)

6.2 下拉列表

<select multiple size="2">
  <option value=”” selected disabled>123</option>
  <option value=”” >123</option>
  <option value=”” >123</option>
</select>

下拉列表

属性	描述
`multiple`	多行选择，该属性和size属性共同来控制显示几行。若不设置size属性，则所有选项全部显示
`size`	用来规定显示几行，若size="1"且无multip，则与下拉菜单相同；但若有multiple,则是只显示一行的下拉列表
`selected`	添加该元素的option标签默认被选中（当打开浏览器时）
`disabled`	禁用选项（即在页面上不可以选择该选项）

6.3 下拉菜单

<select >
    <option value=”” selected disabled>123</option>
    <option value=”” >123</option>
    <option value=”” >123</option>
</select>

在这里插入图片描述

6.4 预定义控件

<input list="name">
<datalist id="name">
    <option value="I23">
    <option value="I23">
    <option value="I23">
</datalist>
    //id和list名称一致

在这里插入图片描述

6.5 分组框

<fieldset>
	<legend>个人信息：</legend>
	姓名：<input type="text"><br>
	邮箱：<input type="text"><br>
	生日：<input type="text">
</fieldset>

在这里插入图片描述

6.6 特殊情况

<label for="agree"> 
<input type="checkbox" id="agree"/>同意以上协议</label>

则点击“同意以上协议”汉字也可以勾选框框

7.行内元素，块级元素，行内块级元素

块级元素	行内元素
可以设置宽和高，padding和margin的四个方向均可设置	不可以设置宽和高，padding和margin的上下方向不可设置
一个占一行	一行可以有多个行内元素
`p,div,ul`
`display:block` 转化为块级元素	`display:inline-block` 转化为行内块级元素