HTML 前端

昨日内容回顾

HTML文档结构

标签要封闭,全封闭,自封闭

html文件不识别多个空格或者换行,都识别成一个空格

注释:
    

head标签

网页源信息,配置信息
title标签,标签页显示内容

body标签

h1 - h6
b,i,u,s,p,br,hr

今日内容

特殊符号

 --空格
>大于号
<小于号
... 
找HTML特殊符号

标签分类

块级标签(行外标签):独占一行,可以包含内敛标签和某些块级标签,div,p,h1-h6,hr,form

内敛标签(行内标签):不独占一行,不能包含块级标签,只能包含内敛标签 

b,i,u,s,a,img,select,input,span,textarea

p标签,p标签内部不能包含块级标签和p标签(里面包含了也不显示)



    
    Title


你好,
她也好
大家都好
我也好

哈哈

呵呵

结果 你好, 她也好 大家都好 我也好 哈哈

img标签和a标签

img标签  内敛标签
    这是个美女...
    src属性='图片路径' alt属性='图片加载失败的提示信息'  title='鼠标悬浮提示信息'(title属性不单单是img标签的)



    
    Title
    


div顶部

朱一龙最帅最温柔

龙龙的独家专属 百度 www.baidu.com 京东

a标签(超链接标签)

内联标签
a标签 
    没有写href属性,百度  显示普通文本
    有属性,但是没有值:百度  #href="" ,写了href属性,但是里面没有值,效果:有特殊效果,文字有颜色,有下划线,点击会刷新当前页面
    有属性有值的:百度,跳转到href属性指定的网址

京东
target="_blank"  新的标签页打开,默认是在当前标签页打开
target="_self"   默认的,在当前标签页打开

锚点示例:




    
    Title
    



这是顶部

24期皇家赌场

这是个美女... 百度 http://www.baidu.com 京东
#跳转锚点,写的是a标签name属性对应的值,写法 href='#值' 回到顶部

列表标签

type对应的值:

无序列表type属性对应的值:

disc(实心圆点,默认值)
circle(空心圆圈)
square(实心方块)
none(无样式)
有序列表type属性对应的值: start属性是从数字几开始

1 数字列表,默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
有序和无序列表:type属性控制显示样式,start控制起始值
无序列表:
  • 柴嘉欣
  • 周道镕
  • 朱凡宇
有序列表
  1. 柴嘉欣
  2. 周道镕
  3. 朱凡宇
标题列表
标题1
内容1
标题2
内容1
内容2

table标签(重点)

姓名 年龄 爱好
柴嘉欣 篮球
周道镕 18
朱凡宇 18
常用属性: border: 表格边框. cellpadding: 内边距 (内边框和内容的距离) cellspacing: 外边距.(内外边框的距离) width: 像素 百分比.(最好通过css来设置长宽) rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列(即合并单元格)

input标签

type属性值 表现形式 对应代码
text 单行输入文本
password 密码输入框(不显示明文)
date 日期输入框
checkbox 复选框
radio 单选框
submit 提交按钮 #发送浏览器上输入标签中的内容,配合form表单使用,页面会刷新
reset 重置按钮 #页面不会刷新,将所有输入的内容清空
button 普通按钮
hidden 隐藏输入框
file 文本选择框 (等学了form表单之后再学这个)

总结

input文本输入框,input标签如果想将数据提交到后台,那么必须写name属性
input选择框,必须写name属性和value属性
input选择框,name值相同的算是一组选择框**

form表单标签

action属性:值是一个网址,将数据提交到哪个网址去
method属性:提交方法,默认是get,效果是在网址上可以看到提交的数据

注意,想通过form表单标签来提交用户输入的数据,必须在form表单里面写你的input标签,并且必须有个提交按钮,按钮有两种,1: input标签type='submit', 2: botton按钮




    
    华丽丽的网址


用户名:
密码:
性别:
xxxxxx

select下拉框



multiple属性,多选,name属性提交数据时的键,option标签中value属性的值需要写,是将来提交数据的真实数据

label标签 (标识一下标签的作用)








  1.label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本,那么和他关联的input标签就获得了光标,让你输入内容
  2.

textarea标签,多行文本输入框'