姐姐半夜不睡觉，既然偷偷在被窝里偷看HTML基础⭐

HTML基础

HTML是什么
文件命名规范
先来看看html文件的基础结构
html基础语法
常用标签
- 文本标题标签
- 字体加粗和倾斜
- 段落标签：p标签
- 常见的字体标记
- 常用转义字符
- 列表
- a标签(超链接标签)的使用
- 图片标签的使用(img)
- 路径的使用
- div和span标签的使用
- 表格标签的使用
- 表单

HTML是什么

HTML指的是超文本标记语言(Hyper Text Markup Language) www万维网的描述性语言。
XHTML指可扩展超文本标记语言(EXtensible HyperText Markup Language) 是一种置标语言，表现方式与超文本标记语言(HTML)类似，不过语法上更加严格。
HTML5指的是HTML的第五次重大修改(第5个版本)

文件命名规范

小写英文字母、数字、下划线的组合
不包含汉字、空格和特殊字符
必须以英文字母开头

先来看看html文件的基础结构

<!DOCTYPE html> <!-- 声明文档类型 -->
<html><!-- 当前文档规范 语言 en:英文 当前页面是否进行翻译 cn -->
<head> <!-- 头部 引入外部的链接 css/js/vue/react/jquery/icon --><meta charset="UTF-8"><!-- 字符集编码 utf-8 国际编码 对页面中的中文进行翻译的 --><!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">1.在移动端中才会使用 2.视口 用户在浏览器中可见的区域范围 等比例缩放<meta http-equiv="X-UA-Compatible" content="ie=edge"> 表示当前页面根据最新的ie浏览器版本进行渲染页面--><title>这是标题</title><!-- 网页的标题 -->
</head>
<body><!-- 内容区域：网页中的所有html标签建议都写在body内 如果你把代码写在body外面，浏览器会自动的把代码提取到body内，当代码量过多的时候，会造成浏览器卡顿的情况-->
</body>
</html>

html基础语法

html注释 <! – 注释 -->
常规标签/双标签
- <标签名称属性1=‘属性值1’ 属性2=‘属性值2’></标签名称>
空标签/单标签
- <标签名称属性=‘属性值’/>

注意
- 在<后面的第一个单词就是标签名称,标签或者标记或者元素
- 在标签名称后面的都是当前标签的属性(修饰当前标签的属性) 标签名称和属性之间一定要有空格
- 属性和属性值之间一定要用等号，属性值要用引号
- 如果一个标签含有多个属性，属性不区分前后顺序
- 单标签通常情况下有一个/表示结束,在html文件中可以不写，但是在xhtml文档中必须写，不写的话会语法报错

常用标签

文本标题标签

+ 标签名称：h1~h6 双标签
+ 默认的样式：h1~h6 文字大小越来越小，加粗效果越来越弱
+ 使用方法：- h1通常用来存放当前网页最重要的部分 标题或者logo 唯一性- h2~h6没有固定的用法

字体加粗和倾斜

+ 加粗标签：b/strong+ 默认样式：+ 字体加粗+ b和strong都可以表示加粗，之间有什么区别？是有区别的，但是官方说肉眼不可见，浏览器区别不明显+ 官方推荐使用strong，b依然是可以使用的
+ 倾斜标签：i/em+ 默认样式:+ 字体倾斜+ i和em有区别，但是官方又说肉眼不可见，浏览器区别不明显+ 官方推荐使用em，i依然是可以使用的，使用率更高更广泛，引入页面图标和字体

段落标签：p标签

+ 默认样式+ 换行+ p标签之间是有间距的+ 宽度根据可视区域进行换行

常见的字体标记

- u 下划线
- br 强制性的换行
- hr 水平线

常用转义字符

- sup 幂 次方
- sub 化学方程式 右下标
- &nbsp； 不换行空格
- &gt；>右尖括号
- &lt；<左尖括号
- &copy；备案中图标版权 ©
- &reg；注册商标

列表

无序列表

<ul><li>第一行</li><li>第二行</li>
</ul>
默认符号(实心圆)

有序列表

<ol><li>第一行</li><li>第二行</li>
</ol>
type:规定列表中的列表项目的项目符合的类型
语法:<ol type='1'></ol>
1 数字顺序的有序列表(默认值) (1,2,3,4,5)
a 字母顺序的有序列表,小写 (a,b,c,d,e)
A 字母顺序的有序列表,大写 (A,B,C,D,E)
i 罗马数字,小写 (i,ii,iii,iv,v)
I 罗马数字,大写 (Ⅰ,Ⅱ,Ⅲ,Ⅳ,Ⅴ)
start:规定有序列表的开始点。(start的属性值必须是数字)
语法:<ol start='3'></ol>

自定义列表

<dl><dt>第一行</dt><dt>第二行</dt>
</dl>

实心圆还是序号是谁的默认样式？ ul/ol li？
- 实际是父级元素的，子级元素会显示，原因是继承了父级的默认样式

a标签(超链接标签)的使用

+ 默认样式- a标签默认的字体颜色不一样(浅蓝色吧应该)- 有默认下划线- 超链接标签，指针移入的时候会变成小手，引导用户点击
+ 属性- href 地址- title 提示文本 鼠标移入时候会提示用户的信息文本- target a标签跳转的方式- _self 默认值 覆盖原窗口- _blank 打开新窗口,不会覆盖原窗口- rel 文档关联 通常情况下可以表示引外部的连接或者其他类型文件，在a标签中常用的属性为nofollow+ nofollow作用- 防止不可信的内容 防止指向一些垃圾链接- 付费链接 防止费钱链接影响网站在浏览器中的排名 seo 搜索引擎优化- 引导爬虫去搜索一些有效的页面，谷歌浏览器推荐使用这个属性+ nofollow使用方法- 在a标签中直接添加<a rel="nofollow"></a> 告诉当前页面的a标签无须进行跟踪搜索- 在头部的meta的标签内书写:<meta content="nofollow"/>告诉网站所有的a标签都不进行跟踪搜索
+ 如果a标签需要跳转到相应的本地文件，但是这个文件还没有开发完成，a标签该如何操作？- 为空 但是页面会刷新，影响开发- # 推荐使用- javascript:;不推荐使用这个属性值，写多会造成浏览器阻塞

图片标签的使用(img)

+ 有初始的宽高、由本身图片所决定
+ 属性- src 路径地址- alt 当网络状态不佳的时候，图片加载失败或者图片设置地址有问题的时候，会出现的提示文本 seo- title 提示文本 title属性可以在所有的html标签中使用- width/height 宽/高 px html属性的属性值可以不接单位- border 边框 数字 默认的边框样式和颜色

路径的使用

+ 绝对路径：找到根目录- 通常情况下根目录都是含有当前电脑的磁盘名称的- 上传到服务器或者放在别人的电脑上去使用
+ 相对路径- 同级目录       当前目标文件/文件夹的名称- 父级找子级    父级文件夹名称/当前目标文件- 子级找父级   ../当前目标文件

div和span标签的使用

+ div：没有具体的含义,在网页中充当一个容器/盒子来布局的 -  独占一行
+ span：没有具体含义,在网页中包裹一段文本或者一个文字 - 在一行内显示

表格标签的使用

标签名称：table - 表格tr - 行td - 列th - 列标题
表格里面的属性设置: html属性- width/height 宽高- border 边框 默认为黑色，样式默认为实线- bordercolor 边框颜色- bgcolor 背景颜色- cellspacing 单元格之间间距的处理，属性值常用为0- cellpadding 单元格与内容之间的距离+ align 水平方向 left right center- table、tr、td均可添加+ valign 垂直方向 top bottom middle- 加在table是无法实线垂直方向居中的- tr、td 默认就是垂直居中的+ 单元格的合并：属性值皆为数字(合并几个单元格)- 列合并 colspan- 行合并 rowspan- 总结：跨行合行、跨列合列+ rules=“rows/cols/all/none/groups” 添加分隔线- rows：位于行之间的线条- cols：位于列之间的线条- all：位于行合列之间的线条- none：没有线条- groups：位于行组合列组之间的线条 分组数据的行分组- thead 表格的头部 - 只有一个- tbody 表格的主体 - 有多个并且默认会生成这个标签- tfoot   表格的底部 - 只有一个数据的列分组- colgroup span属性，选中几个列 只有宽度才有作用，其他属性没有用

表单

表单标签

<form></form>属性:action = '接口地址'method = ‘get/post’name = '表单名称'？ 参数
+ 表单字段集<fieldset></fieldset>- 在浏览器中会有一个宽度占满全屏，高度自适应的盒子- 收集用户信息- form放在最外层进行嵌套，可以进行相互嵌套
+ 字段集标题<legend></legend>属性- align 水平方向对齐方式 left right center justify 两端对齐，文字数量有要求
+ 绑定 提示信息标签<label for='绑定控件id名'></label>

表单控件

<input>属性:type = '控件类型'name：属性标识表单域的名称value：属性定义表单域的默认值，其他属性根据type的不同而有所变化。maxlength：控制最多输入的字符数size：控制框的宽度(以字符为单位)placeholder：h5新增的属性 - value占位置并且需要删除- placeholder不占位置不需要删除+ 文本框<input type='text' value='默认值'/>+ 密码框<inpur type='password'/>+ 提交按钮<input type='submit' value='按钮文字'/>+ 重置按钮<input type='reset' value='按钮文字'/>+ 空按钮<input type='button' value='按钮文字'/>+ 单选按钮组<input type='radio' name='sex'/>男<input type='radio' name='sex' checked='checked'/>女(默认选中)+ 复选框组<input type='checkbox' name=''/>篮球<input type='checkbox' name=''/>唱跳<input type='checkbox' name='' disabled='disabled'/>rap* disabled = 'disabled'(禁用)* checked = 'checked'(默认选中)+ 下拉列表(菜单):<select><option>选项1</option><option>选项2</option><option>选项3</option></select>selected 默认选项+ 表单域多行文本定义<textarea name='' cols='' rows='' ></textarea>rows和cols属性用来设置文本输入窗口的高度和宽度,单位是字符阻止浏览器对窗口的拖动设置: {resize:none;} (css属性)+ 文件上传<input type='file'>

姐姐半夜不睡觉，既然偷偷在被窝里偷看HTML基础⭐相关推荐

昨天在被窝里玩手机游戏到深夜，自己写的“扫雷”，一个字：好玩。
昨天在被窝里玩手机游戏到深夜,自己写的"扫雷",一个字:好玩. 起因:上周日晚看wxWidgets的例程,其中有一个扫雷游戏,即兴玩了一通,感觉有一点不爽,就是每一局开始的时候,都 ...
谁动过你的电脑？小姐姐们要学会保护好自己电脑里的小秘密呀
大家好,我是Lex 喜欢欺负超人那个Lex 擅长领域:python开发.网络安全渗透.Windows域控Exchange架构今日重点:如何知道是否有人偷偷查看过你的电脑的隐私呢 ? 如何知道自己的 ...
红领巾在飘扬的时候，我是快乐的
说起读书,是从初中开始的,那个时候经历过两个有趣的语文老师,渐渐的,对读书有了兴趣.嗯,大抵是如此吧.现在回想起来,不免还有些憧憬. 第一个语文老师因为风趣幽默,使得我渐渐的喜欢上文字.印象里最深刻的 ...
老韩思考：为什么毕业后3年，同学之间相差如此大?
几年前培训过的一个学生,用自己亲身感悟写了这段文字,非常清晰的说明了,为什么毕业后有的人事业越来越成功,而有的人越混越差.非常有深度,非常的深刻,我看完后也是颇有感触... 一.一个沉重的话题:人与人 ...
洛神说看完这篇Mybatis一二级缓存要是你还不会，就送你个学妹！skr
人世仙家本自殊,何须相见向中途.惊鸿瞥过游龙去,漫恼陈王一事无. 嗨,大家好,我是洛神,性别男.一个来自快乐星球的程序员. 欢迎大家专注我的公众号[程序员洛神],不仅分享技术,还会分享生活趣事.体育. ...
controller不跳转页面的几个原因_狗狗为什么不睡觉？是这几个原因
很多人养狗应该都经历过狗狗晚上不睡觉的情况,半夜闹腾吵得人没办法睡觉是其次,如果是狗狗身体状况不对劲就要注意了.今天就来给大家分析一下狗狗半夜不睡觉的原因,希望大家的狗狗都能有个良好的睡眠. 一.新环 ...
为什么每个女生都比较避讳别人问年龄问题？于是我偷偷写了一款年龄检测器，公司同事的年龄都被我知道了~
导语一入Python深似海,不会还要继续坚持学!欢迎阅读往期文章哦! 哈喽!大家好,我是木子,今天又到了一周周末,到了看剧刷抖音的好时间,可怜的我还在公司加班赶稿子. 想着今天都周末了,给大 ...
玩爬虫不就是为了多爬取几个小姐姐吗，几十行代码快速获取小姐姐视频？
又到了愉快的周末了,今天她不在家我们就来玩点骚操作,我们来玩点男人最喜欢干的事情,来爬取小姐姐视频,晚上就可以偷偷的乐了.喜欢的朋友可以来个一键三连. 一.分析页面这次我么爬取的是一个六间房的一个网 ...
一女博士姐姐对《奋斗》的评论，精辟啊
前段时间<奋斗>很火,据说宣传语是"80后圣经",这让我半信半疑,因为本剧的编剧石康是70后,总导演赵宝刚是60后,剧中主要演员也是70后--这里面就没有一个正宗的8 ...

姐姐半夜不睡觉，既然偷偷在被窝里偷看HTML基础⭐

HTML基础

HTML是什么

文件命名规范

先来看看html文件的基础结构

html基础语法

常用标签

文本标题标签

字体加粗和倾斜

段落标签：p标签

常见的字体标记

常用转义字符

列表

a标签(超链接标签)的使用

图片标签的使用(img)

路径的使用

div和span标签的使用

表格标签的使用

表单

姐姐半夜不睡觉，既然偷偷在被窝里偷看HTML基础⭐相关推荐

最新文章

热门文章