您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

HTML基础知识

HTLM基础知识

语义化

  • 每一个HTML元素都有具体的含义
  • 所有元素与展示效果无关,元素展示的效果应该由CSS决定
  • 浏览器带有默认的CSS样式,所以每个元素都有一些默认的样式
  • 选择什么元素,取决于内容的含义,而不是显示出的效果
  • 为什么需要语义化?
    5.1 为了搜索引擎优化(SEO),每隔一段时间搜索引擎会从整个互联网中抓取页面源代码
    5.2 为了让浏览器理解网页

文本元素

H标签

h1-h6 表示1级标题-6级标题

P标签

段落,paragraphs(lorem 乱数假文用于测试)

span标签

无语义,仅用于样式的设计

pre标签(无语义化元素)

  • 表示预格式化文本元素,空白折叠(在源代码中的连续空格字符(空格,换行,制表)),在页面显示时会被折叠为一个空白字符
  • 在pre元素中的内容不会出现空白折叠,按照源代码格式显示到页面上,通常用于显示一些代码
  • pre功能的本质:他有一个默认的CSS属性 white-space:pre,显示代码是外面通常套code元素,code表示代码区域(有语义化)

某些元素在显示时会独占一行(块级元素),有些不会(行级原元素),HTML5已经弃用这种说法

HTML实体

实体字符 HTML Entity,通常用于在页面中显示一些特殊符号

  • &单词;
  • &#数字;
  • 常见的实体字符:< --> <,> --> >,空格 -->  ,版权 --> @copy;,& --> &

四 a元素

1 href属性 表示引用
1.1 表示跳转地址(普通链接)
1.2 表示跳转到某个锚点(设置id属性)href="#id"
1.3 功能链接(点击后触发某个功能)
1.3.1 -执行js代码href=“javascript:js代码”
1.3.2 -发送邮件 mailto:邮箱号 调用计算机安装的发送邮件软件
1.3.3 -拨打电话 tel:手机号 在手机端使用
2 target属性表示跳转窗口位置
2.1 target=_self 在当前页面窗口打开,默认值
2.2 target=_blank 在空白窗口中打开
3 title 当鼠标移动到元素上时鼠标右侧显示的文字

五 路径的写法

1 站内资源和站外资源
2 绝对路径和相对路径
2.1 站外资源使用绝对路径,站内资源使用相对路径
2.2 绝对路径书写格式: 协议名://主机名:端口/path,http协议端口号默认80,https默认443
2.3 相对路径 以./开头 ./表示当前资源所在的目录,可以书写…/表示返回上一级目录

六 图片元素

1 src属性 资源路径
2 alt 当图片资源失效时将使用该属性替换图片
3 map元素,地图 使用map的子元素划分地图,根据不同的区域跳转到不同页面 ,使用area绘制要跳转的区域
4 figure 指代,通常用于把图片标题,图片藐视包裹起来

,figcaption 用于指定标题,是figure的子元素

七 容器元素

1 容器元素该元素代表一个块区域,内部用于放置其他元素
2 HTML5中的语义化元素
2.1 header 表示页头,也可以表示文章头部
2.2 footer 用于表示页脚,或者文章的尾部
2.3 article 用于表示文章,article 可以嵌套header,section
2.4 section 表示文章的一个部分
2.5 aside 用于表达侧边栏(附件信息)
3 元素的包含关系
3.1 块级元素可以包含行级元素,行级元素不可以包含块级元素(a除外)
3.2 元素的包含关系有元素的类别决定,取决于元素的语义
3.2.1 容器元素可以包含任何元素
3.2.2 a元素几乎可以包含任何元素
3.2.3 某些元素有固定的子元素
3.2.4 标题元素和段落元素不能相互嵌套,并且不能包含容器元素

八 iframe元素

1 通常用于在页面中嵌入其他页面
2 iframe 可替换元素
2.1 通常是行盒
2.2 通常显示的内容区域取决于元素的属性
2.3 CSS不能完全控制其中的样式
2.4 具有行块盒特点,盒模型中一部分CSS可以设置

在页面中使用flash

1 使用object和embed,嵌入flash,都是可替换元素
1.1 object --> 参数:src要显示的源文件,type:显示文件的类型,使用MIME(多用途互联网邮件类型)比如.swf文件:“application/x-shockwave-flash”,可以添加子元素,子元素用于传递参数
1.2 embed -->
1.3 兼容浏览器的写法–> ,当object生效时便会使用,如果不兼容则起用embed

表单元素

1 一系列元素主要用于收集用户数据
2 涉及的元素
2.1 input 输入框
2.1.1 type 设置输入框的属性
2.1.1.1 text 普通文本输入框
2.1.1.2 password 密码框
2.1.1.3 date 日期选择框,可替换元素
2.1.1.4 search 搜索框,兼容性问题
2.1.1.5 range 滑块,可以设置最大值max和最小值min
2.1.1.6 color 颜色选择框
2.1.1.7 number 数字选择框,min最小值,最大值,step步进(默认为1)
2.1.1.8 checkbox 多选框,设置多选框的组,使用name表示文本输入框的含义
2.1.1.9 radio 单选框,如果有多个单选框可以设置name属性告诉浏览器那几个radio是一组的
2.1.1.10 file 表示选择文件上传
2.1.1.11 button,reset,submit 设置为按钮
2.1.2 value 输入框的值
2.1.3 placeolder 设置显示提示文本,文本框没有内容时显示
2.2 select 元素
2.2.1 下拉列表选择框
2.2.2 通常和opction配合使用,optgroup 设置分组
2.3 textarea 元素
2.3.1 文本域,多行文本框
2.4 按钮元素
2.4.1 button 设置按钮
2.5 配合表单元素的其他元素
2.5.1 label(普通元素) 通常配合单选合多选使用,表示的是一个表单元素的标签文本,for 属性表示这个标签关联到那个元素属性值为input元素的ID,当点击文字是单选框或者多选框也会被选中
2.5.1.1 显示关联 使用for+id
2.5.1.2 隐式关联
2.5.2 数据列表
2.5.2.1 该元素本身不会显示到页面,通常用于和普通文本框配合
2.5.3 form元素
2.5.3.1 通常情况下会将整个表单元素放置到form元素的内部当提交表达时,会将form元素内部的表单内容已合适的方式提交到服务器
2.5.4 fieldset 表示表单分组,子元素legend设置分组的标题
2.5.5 表单状态
2.5.5.1 readonly属性:布尔属性表示表单可读不可写
2.5.5.2 disable属性:布尔属性,是否禁用,会改变表单的样式

表单美化

 1 新的伪类
   1.1 :focus 元素聚焦
   1.2 checked 当选和多选框被选中的样式
 2 常见用法
   2.1 重置表单样式
   2.2 设置多行文本框textarea是否可以调整尺寸 textarea{resize:both(两个方向上调整)/none(不可以调整)/vertical(垂直方向)/horizontal水平方向上调整}
   2.3 文本框边缘到内容的距离
       2.3.1 设置padding
       2.3.2 设置text-indent 设置首行缩进
   2.4 控制多选和单选的样式

表格元素

 1 border-collapse: collapse(合并一条线)/separate(中间有空隙); 设置表格边框的样式
 2 colspan=value 设置跨列数  rowspan=value 设置跨行数     

其他元素

 1 abbr 表示缩写词
 2 time 提供给浏览器或者搜索引擎用的时间 设置datatime="2019-8-24"属性
 3 b 区分元素(以前是一个无语义元素主要用于加粗字体)
 4 q 表示一小段引用文本
 5 blockquote:value cite属性用于设置引用地址(给浏览器看)  
 6 br 主要用于在文本中换行(无语义)
 7 hr 用于分割
 8 meta 用于显示一些数据给搜索引擎看,还可以用于搜索引擎优化
 9 link 用于连接外部资源,也可以用于连接title处的图标设置网站的图标                                                         

分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进