HTML---第一天内容

来源：互联网发布：unity3d汽车模型下载编辑：程序博客网时间：2024/06/10 22:20

Html不是编程语言，是超文本标记语言
在什么地方都能编辑---任何文本编辑器都可以通常的后缀名.html
语法全用标签组成--<标签名></标签名>

1.基本标签
(1)声明必须写在HTML的第一行上<!doctype html>
(2)所有的标签都必须包裹在<html></html>中
(3)<html></html>中潜逃了两个标签<head><body>
(4)<body>标签，表示眼睛能看见的全在body标签中
(5)在<head>标签中可以使用辅助标签<meta>,此标签能声明网页的编码和搜索信息,实例如下:
<meat charset="UTF-8"><meta name="keywords" content="关键字"><meta name="description" content="网页的描述">

2.一个页面的组成
(1)标签
(2)样式--样子
(3)脚本--操作标签，让标签能动

3.标签的分类
(1)块级元素 -- 标签占满整行，并且设置宽度和高度都有意义
(2)行内元素 -- 标签不会占满整行，设置了高度和宽度没有意义，高度和宽度随标签内的内容自动填充
(3)行内块 -- 标签不会占满整行，但设置了高度和宽度有用

4.基本标签
div标签如果div不包裹任何内容，也不给样式的情况下，没用
span标签专门写文字的标签，如果不加样式和直接写一样
<br/>换行，禁止用<br/>去拼距离
文字内的空格 

5.标签下的属性
(1)id属性，只能有一个，如果有很多个id，显示的时候不出问题，在脚本里只能控制一个
(2)style为标签添加样式格式样式名:样式值;样式名:样式值;
width 标签的宽度(单位 px)
height 标签的高度(单位 px)

6.标签的类型互换
块级和行内元素的转换
用style中的display属性
display:block(将元素转换为块级元素)
inline(将元素转换成行内元素)
inline-block(将元素转换为行内块)
flex(弹性模型)
none(隐藏元素)

7.隐藏元素
(1)设置display为none属性(不占位隐藏)
(2)设置visibility为hidden(占位隐藏)

8.列表
(1)有序列表
用<ol>包裹，每个列表项是<li>
属性:1 按照数字排序(默认)
      a 按照小写字母排序
      A 按照小写字母排序
      i 按照小写罗马数字排序
      I 按照大写罗马数字排序

(2)无序列表
用<ul>包裹，每个列表项都是<li>
(3)自定义列表
用<dl>包裹,头部<dt>，子项<dd>

9.a标签/按钮
属性
href="里面写连接地址"
跳转
(1)设置name
(2)将href指向#name

10.边框
边框属性
border-top
border-left
border-right
border-bottom
格式
border:边框的像素边框的样式标记

11.浮动
左浮动 left
有浮动 right
tips:假如子盒子浮动，那么就不能填充父盒子的高度,此时下面的元素会挤占父盒子的位置

12.弹性模型
实现的是分配屏幕空间，最左边固定，然后剩下的两个怎么分
//首先在父盒子定义display为flex
<div style="display:flex">
  <div style="width;100px"></div>
  <div style="flex:1"></div>
  <div style="flex:2"></div>
</div>
若想实现竖着拆分,则在父盒子里将flex设置为column

阅读全文

0 0