HTML小马哥博客
1. HTML
超文本标记语言
对换行不敏感
空白折叠现象
标签要严格密封
新建HTML文件，输入 html:5,按tab键后，自动生成的代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
head标签都放在头部分之间。这里面包含了：<title>、<meta>、<link>，<style>
<title>：指定整个网页的标题，在浏览器最上方显示。<meta>：提供有关页面的基本信息<link>：定义文档与外部资源的关系。- <style>:定义内部样式表与网页的关系
主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
2. body中标签的分类
- 字体标签
h1 - h6 标题标签
在htm中都是标签,标签的作用: 体现了语义化
h1-h6, u,b,strong,br,hr,em,pre用法
# pycharm中新建html文件 <!--文档的声明 一个html文件就是一个文档--> <!DOCTYPE html> <html lang="en"> <!--双闭合--> <head> <!--head标签中的内容不会显示到浏览器上--> <!--meta是单闭合标签 定义文档的编码类型，右边默认有个/,可以不写--> <meta charset="UTF-8"> <!--title是双闭合标签--> <title>今天我们学习html</title> </head> <!--body中的内容都会显示到浏览器上--> <body> <!--普通文本--> 吴老板 <!-- h1 只允许页面中有一个: 为了seo和爬虫--> <h1>吴老板</h1> <h2>吴老板</h2> <h3>吴老板</h3> <h4>吴老板</h4> <h5>吴老板</h5> <h6>吴老板</h6> <!--行内标签: 在一行内显示,不换行--> <!--underline 下划线--> <u>娃哈哈</u> <!--强调--> <b>你好啊</b> <!--强调--> <strong>你好啊</strong> <!--排版标签--> <!--换行标签--> <br> <!--线--> <hr> <hr> <hr> <!--行内标签用法示例--> ok,基本上HTML标签就给大家介绍到这里，基本上呢，<strong>div+css</strong>布局，我们常用的的标签如下： <!--斜体标签--> <em>哈哈</em> <!--空白折叠: 换行和空格折叠成一个空格--> <hr> 鹅鹅鹅 曲项向天歌 <!--保留格式,但是前面会有空格,固定格式--> <hr> <pre> 鹅鹅鹅 曲项向天歌 </pre> </body> </html>
标签分类:
1. 行内标签
span (文本级标签,里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。)
a
em i
strong b
特点:
- 在一行内显示, 不换行
- 不能设置宽高, 如果不设置宽高, 默认是内容的宽高
- 行内块标签: img input
特点:
- 一行内显示
- 可以设置宽高
2. 块级标签
h1-h6
div
p: 文本级标签,记住, 只能放文字,行内标签,img,表单元素,不能放块 (p标签中不能放div,p标签)
ul:(用得最频繁)
unordered list 无序列表（没有序号） 它的子元素只能是li
·手机 电话卡
·电视 盒子
·
ul
li 块
li
li
ol:
ordered list: 有序列表 里面也放li
1.
2.
3.
4.
dl: 自定义列表
dd
dt
table
tr
td
border="1" style = "border-collapse:collapse"
form
action: 提交服务器的地址
method: 提交的方式
input:
type
name
value
特点:
- 独占一行
- 可以设置宽高,如果不设置宽, 默认是父盒子宽度的100% ##
请求必有响应 前端的解释器就在浏览器中 F12 或检查 elements 元素 console 输出 sources资源 network网络 General请求的响应首行 : request URL: 请求地址 request method: 请求方式 GET获取/post提交 status code 状态码 remote address 远程地址 Response响应: 显示的页面:HTML 内容: 标签 将文本放到浏览器去渲染,不是超文本,则将文件中的文本改变字体,浏览器不会跟着显示 输入标签名按Tab键自动创建闭合标签 br*20 自动创建20个br标签 ul>li*10 自动创建ul标签及下面的10个li标签 按住alt键,鼠标点多行,可以编辑多行 颜色 各个颜色加起来等于盒子大小 蓝色: 内容 黄色:边框 border 橘黄色: 外边距 margin 绿色: 内填充,内边距 padding form input 里面可以设置宽高 style="hight= ;" 网页: 顶部栏 头部(有LOGO) 今日内容: HTML+CSS+JS HTML+CSS 没有逻辑可言 需要记住 HTML: 定义文档的结构 (人的骨架) CSS: 修饰文档的样式 (肉和衣服) JS: JavaScript 动作 (点击, 交互)
其他标签:
超链接
1. 外部链接
a : anchor 是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。
herf : hypertext reference 超文本链接, 超链接
2. 锚链接
3. 邮件链接