Web前端三大核心技术之-HTML
HTML概念
全称:
超文本标记语言(HyperText Mackeup Language),非编程语言,为描述性语言,用于描述超文本中内容的显示方式。比如字体什么颜色,大小等
基本格式:
<html>
<head><title></title></head>
<body></body>
</html>
<html>开始</html>结束
- 里面由头部分
<head></head>
和体部分<body></body>
两部分组成 - 头部分是给Html页面增加一些辅助或者属性信息,它里面的内容会最先加载
- 体部分是真正存放页面数据的地方
注意:Html代码不用区分大小写
解析:
- 放在html文件的开头,但没有实质性的功能,即使没有这个标记,浏览器在碰到其他的html标记时也一样会进行解析
- 浏览器内置了html语言的解析器
- head:头标记,放置关于此html文件的信息,如提供索引,定义css(前端三大核心技术之二)等
- title:标题标记,包含在head标记内,它的作用是设定网页的标题
- body:主体标记,网页所需要显示的内容都放在这个标记内
书写规范
- 多数标签都是有开始标签和结束标签,其中有个别标签因为只有单一功能,或者没有要修饰的内容可以在标签内结束
- 想要对被标签修饰的内容进行更丰富的操作,就用到了标签中的属性,通过对属性值的改变,增加了更多的效果选择
- 属性与属性值之间用“=”连接,属性值可以用双引号或单引号或者不用引号,一般都会用双引号。或公司规定书写规范
HTML标签
- 注释
<!-- -->
- 标题标签
<hx>:
hx的取值是从h1-h6。字体从大到小,字体加粗,自动换行 - 文字粗体标签:
<b>
- 文字斜体标签:
<i>
- 下划线标签:
<u>
- 换行标签:
<br>
,换行标签是单个使用的标记 - 段落标签:
<p>
- 空格标签:
 
字体标签
使用的格式是:
<标签名 属性1="属性值1" 属性2="属性值2" 属性3="属性值3" ...>内容</标签名>
注意:属性值可以是"",也可以是’’,也可以不写引号。但是,推荐使用""
-font:字体标签
属性
- color:颜色
- size:大小 值得取值范围是1-7
- face:字体标签 可以同时指定多个字体,如果都没有满足的,就采用默认字体。
<hr>
:水平分割线
文字列表标签
-
ol有序列表:
属性:
- start 从?开始,默认是1。
- type- 类型:A,a,I,i,1 默认是数字1
- 子标签:li
<ol>
<li>a</li>
<li>b</li>
</ol>
- ul:无序列表
属性:
- type 空心圆circle 、实心圆disc 、实心方块square ,默认disc
子标签:li
-
dl:定义列表
子标签:
- dt:定义语
- dd:定义说明
<dl>
<dt>a</dt>
<dt>b</dt>
<dd>b</dd>
</dl>
图片标签
-img
属性:
- src 图片的位置
- height 高度
- width 宽度
- alt 当图片不存在的时候,给出的提示
- title 真的图片你把鼠标至于上面给出的提示信息
注意:如果同时给宽和高,请注意图片本身的比例,否则,你直给宽或者高即可。它会自动按照缩小或者增大的比例显示。
超链接标签
-a
属性:
- href 提示我们链接的地址
- target 打开方式 _blank 在一个新的页面打开
注意:如果做超链接操作的时候,你没有告诉href这个属性你采用的是什么类型的协议,默认采用的是文件解析协议你想使用网址的时候,请自己加上http协议
<a href="https://www.baidu.com"></a>
3.锚链接:
定义一个锚点,然后再和超链接结合使用
定义锚点:
<a name="锚点名"></a>
使用锚点:
<a href="#锚点名">返回xxx</a
表格标签
-table
属性:
- border:表格的边框,默认是0
- width:表格的宽度,既可以给像素,还可以给百分比
- height:表格的高度
- align:水平位置 left,center,right
子标签:
- caption:表格的标题
- tr 表格的行标签
- th 标题列标签
- td 每一行的列标签,单元格,默认是居左
表格边框的设置:
- border:表格的外边框粗细
- cellspacing:表格的内边框粗细,单元格直接的间距
- cellpadding:设置文字到单元格的距离
表格相关颜色的设置:
- bordercolor:边框颜色
- bgcolor:背景色
表格的内容的位置设置:
- align:文字的水平位置 left,center,right
- valign:文字的垂直位置 top,middle,bottom
表单标签
-form
属性:
- action:表单提交的目的地。默认是当前页
- method:提交方式 post,get 推荐使用post
子标签:
input
属性:type- 表单元素的类型 默认的是文本框类型(text)
文本框:
type="text"
表示这是一个文本框
name="username"
将来用于服务器取值使用 (重要!)id="username"
将来用于js获取值使用(id很重要!!)size="40"
用于控制文本框的长度,能存储的字符的个数value="请在这里输入用户名"
是文本框的默认值,一般用于提示。readonly="readonly"
是标记属性,告诉文本框我是只读的。本身没有值,但是为了符合新的规范,属性必须有值,所以,我们就把它的值和属性设置为一样的,可以通过表单提交获得到值,一般用于用户修改表单内容作限制(不让用户修改)disabled=”disabled”
把当前文本框变成灰色,不能修改只能看,不能通过表单隐藏域:type=”hidden”
要设置name和value
密码框:
type="password"
表示这是一个密码框
name="password"
将来用于服务器取值使用 (重要!)id="password"
将来用于js获取值使用(重要!)size="40"
用于控制密码框的长度value="admin"
默认值readonly="readonly"
是标记属性(同文本框)
单选框:
type="radio"
表示这是一个单选框
name="sex"
将来用于服务器取值使用(重要) -注意:如果多个单选按钮时互斥关系,那么,就必须把这多个按钮看做一个按钮组,一个按钮组的名字必须是一致的。id="man"
将来用于js获取值使用value="男"
将来服务器真正获取到的值checked="checked"
是标记属性,默认选择按钮组的一个值
复选框:
type="checkbox"
表示这是一个复选框
name="xxx"
将来用于服务器取值使用
注意:这里的name如果不一样,那么,有多少个复选框,将来服务器就要获取多少次值,然后判断值是否是null,不是null才把值给存储起来,如果这里的name值一样,在服务器只需要获取一次即可
String getValue(String name) 根据名字获取单个值
String[] getValues(String name) 根据名字获取数组
-
id="sleep"
将来用于js获取值使用 -
value="睡觉"
将来服务器真正获取到的值 -
checked="checked"
是标记属性,默认选择按钮组的一个值
文件框:
-
type="file"
表示这是一个文件框 -
name="file"
将来用于服务器取值使用 -
id="file"
将来用于js获取值使用
按钮:
type="button"
表示这是一个按钮type="submit"
表示这是一个提交按钮,内置了js事件type="reset"
表示这是一个重置按钮,内置了js事件
注意:
下拉框和文本域不是input的type属性能够决定的
选择框(下拉框):
-select标签
-
name="province"
将来用于服务器取值使用 -
id="province"
将来用于js获取值使用
子标签:
–option 标签
-
value="湖北省"
,服务器实际获取的值 -
selected="selected"
默认选中项 -
multiple:把select标签展开,可以多选
-
size="6"
:设置select展开的行数
文本域:
cols="40"
列数rows="10"
行数name="myself"
将来用于服务器取值使用id="myself"
将来用于js获取值使用- 不具有value的属性,值写在元素中间
HTML框架集
框架集一般用于内嵌模块或页面
框架集标签:frameset
属性:
- rows:行分割
- cols:列分割
子标签:
–frame
属性 :
- src=
"http:xxx.com"
:指定要嵌入的页面 noresize="noresize"
可以阻止border拖拽- name:用于指定展示的内容所在的frame
HTML转义
字符实体:一些字符在 HTML 中拥有特殊的含义,比如小于号 (<) 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符,我们必须在 HTML 源码中插入字符实体