菜鸟赵赵今天学什么？学HTML

lucky赵赵
82 阅读9分钟

前言

嗨，老伙计们，你们好吗？我是lucky赵赵，请大家多多指教呀！

菜鸟赵赵重走前端之路，今天学HTML！

不喜勿喷，不喜勿喷，接受任何善意的指教 ^ _ ^

IMG_0781.JPG

HTML

一 前端页面简述

前端页面分为三层：结构层（HTML），表现层（CSS），行为层（JavaScript）

结构、表现、行为三者相分离，便于维护

二 浏览器

1.主流浏览器

浏览器名称内核兼容前缀
IETrident-ms-
Firefox（火狐）Gecko-moz-
Opera (欧朋)blink-o-
Chrome(谷歌)webkit---->blink-webkit-
safari(苹果)webkit-webkit-

其实这也没什么用，日常工作几乎用的都是谷歌，兼容方面它确实还不错。（碎碎念：公司最近有计划要全面使用360，我真的会谢，有些UI库根本不兼容那玩意儿，还要自己开发库，真的呼吸困难。。。。。。）

三 HTML介绍

1.定义

HTML是超文本标记语言

PS：HTML是源码，浏览器是运行源码生成页面的工具/运行环境

2.基本结构/骨架

<!DOCTYPE html>  html的文档类型声明（告诉浏览器用什么标准来渲染页面） 单标签
<html>  根标签   双标签
    <head>   头部  存放网页配置标签（title，meta）和文件引入标签（link，script，style）
        <title></title>  页面标题
        <meta charset="utf-8"/>  设置字符编码集  解决页面乱码的问题
    </head>
    <body>  主体  存放页面布局和展示类的标签

    </body>
</html> 根标签的结束标签

3.标签语义化

问题：说说你对语义化的理解？

语义化包含的范围较广，前端主要涉及标签语义化、类名等取名的语义化。

大部分html标签都有属于自己的语义，根据其语义，合理使用。

在给类名，id名或name名的时候，尽量取有意义的名字如nav，search。

语义化的好处

①对搜索引擎的友好，便于网络爬虫进入页面，快速搜索到页面的重要信息

②提升用户体验（比如：css加载不出来也能看出重要性，或通过名字看出含义）

③利于代码的可读、维护、提高开发效率 (网页源代码方便查询)

4.标签分类

1）单双标签

单标签：只有开始标签，又叫空元素即内部不可以嵌套其它内容，img br input hr

双标签：有开始标签，有结束标签，关闭符不可以省略，内部可以嵌套其它标签等内容

2）块、行块、行内标签

①块

独占一行，宽高生效，内外边距皆可控制，宽度默认继承父级100% ，内部可以嵌套任何其它标签

例如：ul table form div nav header p h1-h6

②行块

按内容占大小，宽高生效，，内外边距皆可控制，可以和行内、行块同一行展示 ，内部可以嵌套文本，其它行内标签，行块标签

例如：img input video td th select textarea

③行内

按内容占大小，宽高不生效，可以和行内、行块同一行展示，内部只能嵌套文本或其它行内标签，注意a里面不要再嵌套a

例如：a strong b em i del s ins u span

3）语义化，无意义标签

语义化：p h img a hr 居多

无意义标签：div span

5 标签层级关系

分为嵌套（父子，祖先和后代），并列（兄弟）关系

书写规范：兄弟上下对齐，嵌套里子级层层缩进

三 常用标签

1.基本标签

标签名中文含义分类备注
h1...h6标题双，块，语义①和title的区别，title是页面的标题，h是内容块的标题 ②字的大小，重要性依次减小
p段落双，块，语义内部不可以嵌套块级标签
hr主题变化， 显示为水平线单，块，语义无
br换行单，行内，语义强制换行
div/双，块，无意义用于布局
span/双，行内，无意义用于布局
pre预格式化的文本双，块，语义保留空格和换行
img图片单，行块，语义用src属性写路径
a超链接双，行内，语义用href属性写路径，href必写
ul无序列表双，块，语义无序是指没有序号，按照编辑器上的顺序显示
li列表项双，块，语义是ul，ol的子级，内部可以嵌套其它任何标签
ol有序列表双，块，语义有序是指自动生成序号
dl自定义列表双，块，语义内部嵌套子级 dt dd
dt自定义项目标题双，块，语义
dd自定义项目内容双，块，语义
table表格双，块，语义
caption表格表头双，块，语义是table的子级
tr行双，块，语义
th表头单元格双，行块，语义默认内容水平居中，文字加粗
td普通单元格双，行块，语义
form表单双，块，语义收集用户信息，数据传输时必须写
input输入框单，行块，语义注意默认样式
select下拉列表双，行块，语义
option列表项双，块，语义select的子级
textarea多行文本域双，行块，语义内部嵌套文本或非块级标签
label标注双，行内，语义
fieldset表单分组的域双，块，语义是form的子标签，默认由边框
legend域的标题双，块，语义是fieldset的子标签

2.文本格式化标签

image.png 图源网络，侵删

3.常用特殊字符

HTML 原代码显示结果描述
&lt；<小于号或显示标记
&gt；大于号或显示标记
&amp；&可用于显示其它特殊字符
&quot；“引号
&reg；®已注册
&trade；™商标
&ensp；半个空白位
&emsp；一个空白位
&nbsp；不断行的空白

此内容指路

四 路径

1.分类

路径分为相对路径和绝对路径

2.绝对路径 --- 用的少

①以本地磁盘盘符开头的如：C:\Users\juejin.jpeg

②以http开头 如：www.baidu.com/juejin.jpeg

使用简单方便，不能更换位置，具有唯一性

3.相对路径 ---用的多

从当前文件开始去找到目标文件的过程，需要去查找相对的位置

优点：文件相对位置不变的情况下，在不同的电脑上，不同的盘符里都能正常显示 例如：host文件位置 C:\windows\system32\drivers\etc

五 img 图片标签

<img src="路径" alt="破损提示" title=“鼠标悬浮提示” width=“css”  height=“css” border=“css”>

注意点：如果设宽高属性，一般只设宽（可以设具体的px，也可以设%，父级宽度乘以%），高度让其自动等比缩放

六 a标签

1.基本语法

<a href="路径，必写"  target=“新窗口在哪里打开”>
    文字
    嵌套其它行块，行内标签
</a>
​
target属性 默认值是_self 表示在本窗口打开  ，取值为_blank 表示在新窗口打开  

2、功能

①页面之间的跳转或本页面的刷新

href=“” 或者是“#” 表示无链接地址，会刷新本页面

href=“网址/文件路径” 会跳转

②定位：定位到本页面的指定位置或者是其它页面的指定位置

需要给指定位置的标签加id名，在a的href="#id名"

七 列表

1.适用场景

针对样式一致的图片或文字

2.分类

分为ul，ol，dl

八 表格

1.作用/使用场景

展示数据

2.基本结构

<table>   表格
    <caption>表格的标题/表头</caption>
    <tr>  行
        <th>表头单元格，水平居中，加粗</th>
        <th></th>
    </tr>
    <tr>
        <td>普通单元格</td>
        <td></td>
    </tr>
</table>

3.常用属性

table可以用border，但一般用css代替

td和th中可以用colspan跨列，rowspan跨行

4.常用样式

①width，height

table，tr，th，td都可以设置并生效

table、tr、块级标签

th、td 行块标签

②border-collapse：collapse合并边框

放在table的样式里

③padding 内边距

放在th/td内

九 表单

1.定义

表单用于收集用户信息，并传输给后台/服务器端进行数据分析，是连接前端和后台的桥梁

2.基本语法

<form action=“url地址” method=“传输方式get/post” name=“后台识别的表单名字”>
    内容/各种标签
</form>

注意：

①form常用于登录和注册页

②name在做传输的时候必须写，action后可以接前端/后台地址

③post是加密发送，get是可见式发送，post更加安全

3.input标签

（1）input基本语法

<input type="类型" vlue=“初始值/默认值” placeholder=“占位提示“ name=”后台识别“>

注意:

①value和placeholder不同时写，placeholder用于提升用户体验（用户可以直接输入，无需手动删除提示信息），value用于js的验证

②做前后台交互时，name必写

（2）input的类型

①1隐2填3选4点

1隐：hidden隐藏域

2填：text文本框 password密码框

3选：radio单选按钮 checkbox复选框 file文件上传

4点：button普通按钮 reset 重置按钮 submit提交按钮 image图片提交按钮

②注意要点

radio用于多选1，name名必须写，并且name名要一样

性别：
<input type="radio" name="sex">男
<input type="radio" name="sex">女

checkbox 用于多个选择中任意选，默认选中可以在input中加checked=“checked”，同radio

爱好：
<input type="checkbox" name="love" checked="checked">敲代码  --- 默认选中
<input type="checkbox" name="love">睡觉
<input type="checkbox" name="love">不做声
​
性别：
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女--- 默认选中

button是普通按钮，需要写value值，reset、submit、image都是功能性的按钮，image需要写src属性引图片路径，还可以加宽高设置大小

<input type="button" name="" value="普通按钮">    ---value值必写
<input type="reset" name="">    --- 功能：重置（等同于刷新）默认生成“重置”两个字，value值会覆盖
<input type="submit" name="">   --- 功能：提交      默认生成“提交”两个字，value值会覆盖
<input type="image" name="" src="1.png" width="30px"> --- 功能：提交  使用图片更美观

（3）input的其它属性

①readonly 只读 给text框
<input type="text" value="这是我的你只能看" name="usename" readonly="readonly">  
只能看，不能修改
②disabled 禁用 2填3选的
<input type="checkbox" name="agree" disabled="disabled">不同意
③size 可见宽度 2填
<input type="text" value="这是我的你只能看" name="usename" size="20">  
④maxlength 2填
<input type="password"  name="psd" maxlength="5">  
readonly 只读，disabled 禁用， size 可见宽度，maxlength

4.下拉列表select

用于从多个选项中进行选择，功能同单选按钮和复选框，优点是节省空间

缺点：不够美化，实际开发中一般会直接调用组件

休息日：
<select multiple="multiple">
    <option>星期1</option>
    <option>星期2</option>
    <option>星期3</option>
    <option>星期4</option>
    <option>星期5</option>
    <option>星期6</option>
    <option selected="selected">星期日</option>
</select>
​
selected="selected"表示默认选中的

5.textarea 多行文本域

.area{
    resize:none;/*禁止拖拽，将右下角的拖拽标识隐藏*/
    width:;
    height:;
    /*它是行块标签，一般设定好宽高/固定大小，不拖拽*/
}
​
<textarea class="area">
    文本内容
</textarea>

6.label 标注

（1）作用

用于优化鼠标用户的体验

（2）用法
①直接将input整体作为子级，嵌套在label里面，点击文字输入姓名就可以获取光标
<label>
    输入姓名：
    <input type="text">
</label>
​
②只是将文本放在label标签中，input是它的兄弟标签加id名，label中加for='input的id名'，点击文字输入姓名就可以获取光标
<label for=“inp”>
    输入姓名：
</label>
<input type="text" id=“inp”>
​

Happy Ending

好啦！下次见啦！

avatar
文章
阅读
粉丝