您的位置：首页 > Web前端 > HTML

HTML---第一天内容

2017-08-19 09:07 85 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html 语言入门

相关文章推荐

新的分享

章节导航