Phase3 Day1 HTMl_phase3 ts开发-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43798860/article/details/105926916

文章目录

HTML

HTML

1.概述

HTML(hyper text markup language)超文本标记语言

“超文本”：包含文本字体,图片、链接，甚至音乐、程序等元素的文本
是一个以.html为后缀的文本，也是一个网页
该文本可以用浏览器打开 HTML 是一个使用“标签”来描述网页的文本 (标签在html文本中有实际意义)

网络(www)三要素:

http：协议
html：文本
url：统一资源定位符，有三部分：协议、域名、服务器内部路径(给服务器解析的路径)

访问服务器的流程：

首先要获得服务器IP地址（由浏览器来解析url获得）
然后根据已知的地址,通过某种方式(http), 访问到这台目标电脑
获取资源(html来承载资源)
浏览器解析这个html代码，把html承载的资源’渲染’出来

1.2 HTML模板

是用标签来描述的文本
成对标签: 标签是成对出现 (不绝对)
整个html文本用一个<html>标签包裹
一个html文本分为两部分, <head>和<body>

body 和 head 的区别

Head标签内部的元素不负责显示
Body标签内部的元素才是用来显示

1.3 HTML中body内部标签

块标签: 块级标签, 在html渲染网页中, 块级元素独占一行

独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
可以直接控制宽度、高度以及盒子模型的相关css属性
在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
在不设置高度的情况下，块级元素的高度是它本身内容的高度
块级元素是指本身属性为display:block;的元素。
通常使用块级元素来进行大布局（大结构）的搭建

常见的块级元素: div、p、h1、 h2、 h3、 h4、 h5、 h6，ol、ul、dl、li、form、table

行标签: 在html渲染中, 和不同行级标签在一行排列

和其他内联元素从左到右在一行显示
不能直接控制宽度、高度以及盒子模型的相关css属性，(但是直接设置内外边距的左右值是可以的)
内联元素的宽高是由本身内容的大小决定（文字、图片等）
内联元素只能容纳文本或者其他内联元素（不要在内联元素中嵌套块级元素）
内联元素是指本身属性为display:inline;的元素。
通常使用行级元素来进行文字、小图标（小结构）的搭建。

常见的行标签:
span 常用内联容器，定义文本内区块;
a 锚点;
b 加粗;
strong 加粗强调;
i 斜体;
strike 中划线;
br 强制换行;
u 下划线;
textarea 多行文本输入框;
input 输入框;
select 下拉列表;
img 引入图片

行内块: 行内块本质上上是一个行级元素(一行排列), 具有一些块级元素的特性(可设置看高以及内外边距)
可以与其他行内元素、内联元素共处一行
可以设置宽高、内外边距
属性为display:inline-block;的元素
常见:input 输入框 img 引入图片

注意: 可以在行内样式或css样式中改变元素的display将三种元素进行转换(不推荐这样使用)

display: block；(将元素变为块级元素)
display: inline； (将元素变为行级元素)
display: inline-block；（将元素变为行级块元素）

hr 横线标签

单标签
块标签
标签属性
noshade:颜色是否有阴影(纯色)
size:高度( 厚度,不同于height,不带单位时–默认px )
width:宽度(不带单位时–默认px)
align:对其方式

h1-h6 标题标签

h1最大-----h6最小
双标签
块标签
超过h6的标签 : 自定义标签，html中, 不存在于html规范的标签, 叫自定义标签, 按照无标签显示, 自定义的标签不具有任何实际的意义
h1只能在一个html文档中出现一次
属性align

div 区域标签

标签可以把文档分割为独立的、不同的部分
双标签

a 超链接标签

定义超链接，用于从一张页面链接到另一张页面
双标签
最重要的属性是 href 属性，它指示链接的目标,例如<a href=“https://www.jd.com/”>
属性:target,指示该超链接打开的方式 (本窗口, 新窗口, 父级窗口, 顶级窗口, 同组值)
_self:它使目标文档显示在超链接所在框架或者窗口中
_blank:在新窗口打开
_parent:在父窗口打开
_top:在顶级窗口打开
同组值:通过单击一个窗口中的不同链接控制另一窗口内容变化 ; 浏览器会找与target值相符的框架或者窗口中的文档，有则在其中显示文档。如果不存在，浏览器打开一个新窗口
<iframe>这个标签的作用,就是在一个html页面中引入一个新的页面
属性.

p 段落标签

标签定义段落
元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，也可以在样式表中规定
双标签

img 图片标签

在这里插入图片描述

Alt: 作用是当图片显示失败的时候, 页面显示的内容
Src: 图片路径
width：像素

input 输入框标签

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
text:默认文本
password:密码
button:按钮
hidden:隐藏输入框
radio:单选框
reset:定义重置按钮
submit:提交

textarea 文本输入控件

标签定义多行的文本输入控件
双标签
属性
Cols:列
Rows:行
Maxlength:最大
Placeholder:提示
readonly :只读

select 选择下拉框

和option是成对的标签
属性:
option:selected(selected="selected"选中状态)
select :multiple(multiple =“multiple“ 允许多选)
select :size(size =“4”下拉可见数4)

ol 有序列表标签

在这里插入图片描述

<li> 标签定义列表项目 ,可用在有序列表和无序列表中。
Type:规定在列表中使用的标记类型(1,A,a,I,i)
Start:规定有序列表的起始值
Reversed:规定列表顺序为降序(9,8,7…)

ul 无序列表标签

type
disc:默认值
实心圆。
circle :空心圆
square :实心方块

table 表标签

结合标签<tr><td><th>标签使用
tr:行(Bgcolor颜色,valign对齐方式:top,middle,bottom)
td:单元格(colspan横跨列数,rowspan横跨行数)
th:加粗
属性
Bgcolor:颜色
Border:表边框宽度,不定义则无边框
Cellpadding:规定单元边沿与其内容之间的空白
Cellspacing:规定单元格之间的空白