html基础

最新推荐文章于 2024-09-14 12:37:34 发布

昵称查重

最新推荐文章于 2024-09-14 12:37:34 发布

阅读量246

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43548499/article/details/115155147

版权

HTML 字符编码浏览器内核基础标签标记语言

关键词由CSDN通过智能技术生成

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

初级教程，参考此链接：菜鸟教程

HTML介绍

HTML全称：超文本标记语言( HyperText Markup Language)是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

HTML字符编码

空格：&nbsp；
小于：&lt； less than
大于：&gt；great than

浏览器

市面上主流浏览器及其内核，浏览器分 shell+内核
主流浏览器是有一定市场份额，并且有自己独立研发的内核

浏览器	内核
IE	trident
FireFox	gecko
Google Chrome	webkit / blink
Safair	webkit
Opera	presto

HTML基础

基本结构：

<html lang="en">  
//html是文档的根标签，一个html文件中只有一个根标签,
//lang = 'en'告诉搜索引擎爬虫该网站是关于什么内容的，en代表英文，zh代表中文，de代表德语
<head>	 //head标签中的元素可以引用脚本、样式表、提供元信息等
  <meta charset="UTF-8"> //meta标签可以设置编码格式，一般都设置utf-8，unicode编码，包含所有国家的语言
  <meta content="服饰" name="keywords">     //设置网站主要内容，更符合搜索引擎爬虫的喜好，使网站排名靠前
  <meta content="时装" name="description">
  <title>Document</title> //设置网页标签的名字
</head>
<body>  //body中的内容是展示给用户看的
  
</body>
</html>

编码字符集扩展

gb2312是国家标准编码字符集（包含简体、亚裔字符集）
gbk是国家标准编码字符集扩展版本（增加了繁体）
unicode是万国码，包含所有国家的语言

基础标签

标签的分类

行级元素 inline 例：a b span img input select strong
块级元素 block 例：div、p、h1~h6、ul、li、ol、dd、dt、dl、table、hr、address、pre、menu
行级块元素 inline-block 例：img、input

inline元素特点:

(1)、同行展示；
(2)、元素的高度、宽度、行高及顶部和底部边距不可设置；
(3)、元素的宽度就是它包含的文字或图片的宽度，不可改变。

block元素特点：

(1)、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）;
(2)、元素的高度、宽度、行高以及顶和底边距都可设置;
(3)、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

inline-block元素特点：

(1)、和其他元素都在一行上；
(2)、元素的高度、宽度、行高以及顶和底边距都可设置

常用标签：

//标题，成段展示，独占一行，从1到6字体依次减小
 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h5>
 <h6>六级标题</h6>
 <strong>加粗</strong>
 <em>斜体</em>
 <del>删除线</del>
 //div和span标签没有特殊含义，为了让页面更加结构化，分块明确，充当容器使用，也是最常用的标签
 <div></div>
 <span></span>
 <br>  //换行
 <hr>  //水平线
 
 <ol type="1"> 
 //有序列表 
 //如果写成：<ol type = “1”> 就以 ABC 排序， 改成 a，就以 abc 排序
 //此处的 type 值只有五个：数字，大写英文 A，小写英文 b，罗马数字大写 I，罗马数字小写 i ，A 可以 27 进制
 //写成<ol type = “1” reversed = “reversed”> 就是倒序
 //如果想从第 2 个开始排序，就写<ol type = “1” start = “2”>
 //如果想从第 117 个开始排序，就写<ol type = “i” start = “117”>，想从第几个开始排，start 里面写数字几
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
 </ol>
 
 <ul type="desc">  
 //无序列表，具有很好的天生父子结构，常用于导航栏
 //type = “disc” 意思是 discircle，实心圆
 //type = “square” 意思是 square，实心方块
 //type = “circle” 意思是 circle，圈(空心圆)
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
 </ul>
 
 <img src="./素材/1.png" alt="图片" title="图片">
// alt 是图片占位符。当地址出错时，图挂了，来展示这个信息；图片没问题，就不会展示这个信息
// title 是图片提示符。当鼠标放上去，就会显示这个信息
// src 是 source 的缩写，img 的地址分：
// 1）网上 url
// 2）本地的绝对路径
// 3）本地的相对路径
// 如 html 和图片在同一文件下，是一种相对关系，相对路径，写法<img src = “123.jpg”>
// D:/a/b/lesson2.html
// D:/a/b/123.jpg
// 如 html 和图片不在同一文件下，是绝对路径，写法<img src = “D:/a/b/c/123.jpg”>
// D:/a/b/lesson2.html
// D:/a/b/c/123.jpg

<a href="http://www.baidu.com" target="_self">百度一下</a>   
// a标签常用于超链接
// target = “_blank”意思是在新标签中打开这个地址
// target = “_self”意思是在当前页打开这个地址
<a href="tel:151xxxx2021">拨打此号码</a>      //打电话
<a href="mailto:xxx@xxx.com">发邮件至xxx@xxx.com</a>   //发邮件
<a href="javascript:"></a>    //协议限定符，可以运行js代码

// form 表单，能发送数据，非常重要
// form method = “get/post”这是 form 发送数据的两种方式
// action = “http://ssffg.php”这是发送给谁，就是 action 的位置
// form 表单里面还需要配合 input 来写，input 里面需要 type
// <input type = “text”> //这个是输入框的意思
// <input type = “password”> //这个是密码框的意思，默认是暗文
// <input type = “submit”> //这个是提交的组件，也就是登录
// <input type = “submit” value = “login”> //这样就改变了提交框的值
// <input type = “radio”> //是单选框
// <input type = “checkbox”> //是复选框
// 发送数据要注重数据的主题（数据名）和数据的内容（数据值），缺一不可，没有这个就发送不了数据
// 点击提交之后，页面地址栏后面出现 html？后面有值，就是发送成功的体现
<form action="" method="GET">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit">
</form>