html基础

it2022-05-05 157

1. webstorm快捷键： alt+f2：选择浏览器浏览 ctrl+d：复制前一行 ctrl+shift+/：注释 ul>li*4+tab：生成一个ul且里面包含四个li div.test：生成一个div标签且其class="test" Lorem+tab：webstorm中的测试文字按住ctrl,鼠标移动到路径中任意一部分分路径，若变蓝且可点击，则路径正确，若不可点击，则路径错误 2. 其他快捷键 shift+空格：切换全角半角

html基础

html结构

单双标签

1. 单标签

标签描述<meta charset=" "/>规定该html的字符。用charset=" "来设置。charset取值：UTF-8：国际通用；gbk：国标。UTF-8可识别的字符比gbk多，特别是符号<img src="图片路径 " alt="图片描述" width="宽" height="高" title=“图片标题 ”/>行内块标签<br>换行

① <img alt=" "/>中alt属性的作用

（1）当鼠标放到图片上的时候，会出现alt后的内容（该作用和img中的title属性作用相同）

（2）当图片未在浏览器显示时，会用alt后的文字代替图片

（3）当在网页中搜索关键字搜索图片时，会与alt后的内容匹配

2. 双标签

标签描述<html></html><head></head><title></title><body></body><p></p>块标签h1~h6从1~6字体越来越小。为了优化，一般只写一对<h1></h1>在搜索时若有两个标题类文字，则不能确定主题<a href=" " alt=" " target="目标窗口" ></a>href为链接地址。target取值可以有两个：_blank(新窗口打开链接) ； _parent(在原窗口打开链接)<hr></hr>水平线；可设置宽度<b></b>加粗<i></i>斜体<u></u>下划线（h5中已pass掉）<strong></strong>加粗<em></em>斜体<del></del>删除线<sub></sub>下标<sup></sup>上标<big></big>比正常字体大点(h5中已pass掉)<small></small>比正常字体小点<pre></pre>在工程中写什么格式，页面就显示什么格式块标签<a href="mailto:邮箱地址"></a>发送邮件的一种方式。邮件地址是收件人的地址。点击变迁中的字后跳转到windows自带的一个可发送邮箱的地方（只能跳转到windows自带的，且前提是电脑装了该邮箱）

① <a></a> 锚记

(1) 跳转到相同页面的不同位置

<a href="#test"></a>与<a id="test"></a>匹配使用：当点击标签<a href="#test"></a>内的文字时，会跳转到当前页面的id="test"标签处

（2）跳转到不同页面的不同位置

<a href="文件名#test"></a>与<a id="test"></a>匹配使用：当点击<a href="文件名#test"></a>内的文字时，会跳转到文件名指示的文件中的id="test"标签处

一些注意事项

1. 设置图片宽高时： ① %：当页面大小变化时，或者父标签变化时，图片宽高会变化 ② px：设置多大就是多大，与页面大小无关，即页面伸缩时，图片宽高不变。 3. 给图片加超链接，可以用一个a标签包起来 4. 常用的图片格式：.jpg .png .gif .webp 小的动图用gif 图片像素比较高、较鲜艳时用jpg 一般做背景图片用png webp格式的图片只有网页可以解析（手机端不可）

列表

1. 无序列表

描述：没有序号的列表，但是前面有标记，用`type`属性设置，它的取值有：disc(实心圆)、circle（空心圆）、square(小方块) <ul> <li></li> </ul>

2. 有序列表

描述：有序号的列表。用`type`属性设置以字符还是数字来进行排序（取值：1、A、a、I、i）；用`start`属性设置第一个标记是从第几个字符/数字开始的 <ol> <li></li> </ol>

3. 自定义列表

描述：该列表中的`dt`标签是给`dd`中内容的定义。 `dd`标签中包含着具体内容。在h5之前，`dt`数量只能有一个，而`dd`数量可以有多个 <dt> <dd></dd> <dd></dd> </dt>

表格

:) 浏览器会自动给表格加上`<tbody></tbody>`

结构

tr为行，td为行内单元格<th></th>代表表头第一行的单元格，特点：在单元格内加粗且居中，一般写在第一行。一个<th></th>占据一个单元格的大小<td></td>有默认padding,在给table设置cellpadding时，不是叠加，而是将设置的值当做最新的padding值 <table> <caption>表格的标题</caption> <tr> <td></td>  </tr> </table>

表格属性

属性描述border边框线width宽度bgcolor背景色cellpadding单元格里面的字和单元格边框的距离cellspacing单元格之间的距离

<td>属性

属性名描述colspan跨列（合并列）rowspan跨行（合并行）

表单

格式

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

表单相关标签

:) 1. 常见属性： min(最小值) max(最大值) maxlength(最大长度) value(默认文字) size(可见宽度) requied(必填项) placeholder(提示信息) 其中size和maxlength是任何类型的文本框都有的， max和min是type为number特有的属性,若想给普通文本框设置可以通过js 2. sumbmit 和reset按钮有默认文字（分别是提交和重置），若想重置，可给value设置值标签描述<input type="text" />文本框<input type="password" />密码框<input type="radio">单选框，用name相同来控制只选择一个<input type="checkbox"/>复选框<input type="number"/>填写数值类型<textarea name="" cols="" rows="" style="resize:none"></texarea>多行文本框。设置resize:none可以限制多行文本框的扩大和缩小<input type="submit"/>提交按钮<input type="button"/>确定按钮<button></button>确定按钮<input type="reset"/>重置按钮<label></label>

详解<label></label>

<label for="username">昵称：</label><input type="表单类型" id="username"> 注意： 1. 在上述例子中，label标签的for属性取值和input标签的id属性取值相同，代表两者关联。 2. 在后端解析代码时，是根据input的id或者name去寻找数据的。label是给屏幕解析器用的。

<label></label>例子

注意： 1. 在该例子中，当点击同意时，与其for取值相等的id对应的input标签被选中。 2. 若不加`<label></label>`，则只能点击input的单选框才可被选中 <label for="username">同意</label><input id="username type="radio"/>

复合标签

1. 下拉菜单

结构

option属性

属性描述value涉及到js内容（前后端交互时使用）selected添加该元素的option标签默认被选中（当打开浏览器时）disabled禁用选项（即在页面上不可以选择该选项）

2. 下拉列表

结构

select属性

属性描述multiple多行选择，该属性和size属性共同来控制显示几行。若不设置size属性，则所有选项全部显示。必须！！！size用来规定显示几行，若size="1"且无multip，则与下拉菜单相同；但若有multiple,则是只显示一行的下拉列表

3. 预定义控件

在input中输入内容可以对option进行筛选，若没有输入，则点击文本框时展示全部选项内容。list后的内容必须和id后面的内容相同

结构

4. 分组

格式

图例：

块级元素、行内元素、行内块元素

注意： 1. 块级元素和行内块元素可以设置宽高，margin的四个方向都可以设置，padding的四个方向也都可以设置 2. 行内元素不可设置宽高，margin的上下方向以及padding的上下方向不可设置。但其左右方向可以设置大小 3. 行内块元素既有行内元素的特点，也有块级元素的特点 4. 水平margin可以叠加，竖直margin不可叠加（取最大）

专利

最新回复(0)