文章首页 Web开发 Windows开发 编程语言 数据库技术 移动平台 系统服务 微信 设计 布布扣 其他

HTML入门全解

时间：2021-09-17 14:44:36   收藏：0   阅读：35

?

一.HTML代码结构剖析

 	<!-- 1.文档声明 -->
 	<!-- 2.html元素 -->
    
     	<!-- 3.head元素 -->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        
        <!-- 下面是非自动生成 但是可以写在head里的元素 -->
        <link rel="stylesheet" href="这是URL">
        <style>...省略代码</style>
        <base href="这是URL">
    	<script>...省略代码</script>
        <noscript>...省略代码</noscript>
    

     	<!-- 4.body元素 -->
		...省略代码

1.文档声明

2.html元素

  
      ...省略代码

3.head元素


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <!-- 下面是非自动生成 但是可以写在head里的元素 -->
    <style>...省略代码</style>
    <link rel="stylesheet" href="这是URL">
    <base href="这是URL)">
    <script>...省略代码</script>
    <noscript>...省略代码</noscript>

4.body元素


    ...省略代码

二.HTML基本元素

进阶元素点这里

1.h元素

<h1>这是h1</h1>
<h2>这是h2</h2>
<h3>这是h3</h3>
<h4>这是h4</h4>
<h5>这是h5</h5>
<h6>这是h6</h6>

2.p元素

 <p>原标题：必须抵制挑衅现代文明的行径</p>

3.strong、code、br、hr元素

<strong>这是strong元素</strong>
<code>这是code元素</code>
<br>
<hr>

4.span元素

<span>这是span元素</span>

5.div元素

<div>这是div元素</div>

6.img元素

<img src="这是URL" alt="这是图片无法显示后显示的文字">

7.a元素

<a href="这是URL" target="_self">这是超链接</a>

7.1.a元素的基本使用

7.2.a元素和base元素结合使用




    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- base base是href的重复字段抽取 （如果说你前面没有写）-->
    <!-- 甚至可以默认所有超链接的target -->
    <base href="https://www.baidu.com" target="_blank">


    <a href="">百度一下</a>
    <a href="/img/bd_logo1.png">百度logo</a>
    <a href="s?wd=abc">搜索abc</a>
    <a href="https://www.taobao.com">淘宝一下</a>

7.3.锚点链接：跳转到页面的相应位置

7.4.伪链接：不希望打开新的URL，而是希望干点别的事情

8.字符实体

&nbsp; 一个空格
< > (< left than, > great than)
& (表示&符号)
"(表示双引号)

三.URL： Uniform Resource Locator(统一资源定位符)

四.CSS基本学习

1.如何将CSS样式应用在元素上？

  1. 内联样式(inline style)
  2. 文档样式表(document style sheet)、内嵌样式表(embed style sheet)
  3. 外部样式表(external style sheet)
    • 外部样式表引入的两种方法：
      • 使用link：
      • 使用style的@import：@import url(./css/style/css);
    • 你可以在一个css样式中使用import url来引入另一个css
  4. 关于层叠：后面引入的css会覆盖（层叠）掉前面的css

2.选择器（selector）

3.最常用的css属性

  1. color（前景色 不只是文字颜色，下划线删除线，边框颜色等等）
  2. font-size（文字大小）
  3. background-color（背景色）
  4. width（宽度）（行内非替换元素是不生效的）
  5. height（高度）

五.文本/文字属性

1.文本属性

2.文字属性

六.更多选择器

更多选择器：

七.伪类和伪元素

1.伪类(pseudo-classes)

1.1动态伪类(dynamic pseudo-classes)

编写顺序建议： Link Visited Focus Hover Active

1.2结构伪类（structural pseudo-classes)

1.2.1 :nth-child 与 :nth-last-child
:nth-child (数字)
:nth-child(n)

:nth-last-child 和 :nth-child一样，只不过是从后往前数

1.2.2 :nth-of-type 与 :nth-last-of-type
1.2.3 其余的结构伪类

1.3目标伪类(target pseudo-classes)

1.4元素状态伪类(UI element states pseudo-classes)

1.5否定伪类 与 语言伪类

2.伪元素(pseudo-elements)

2.1 ::before 与 ::after

2.2 ::first-line 与 ::first-letter

八.Emmet语法

1.基础Emmet语法

1.1用 ! 或者 html:5 生成html5代码

1.2 > (子代) 和 + (兄弟)

1.3 * (生成多个元素)

 <!-- div>p*5 -->
    <div>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>

1.4 ^ (生成上一个层级的元素)

 <!-- div>p>span^h2+a^h1+strong -->
    <div>
        <p><span></span></p>
        <h2></h2>
        <a href=""></a>
    </div>
    <h1></h1>
    <strong></strong>

 <!-- div>p>span^^h1+strong -->
    <div>
        <p><span></span></p>
    </div>
    <h1></h1>
    <strong></strong>

1.5 () (分组)

<!-- div>p>span^h2+a^h1 -->
<!-- div>(p>span)+h2+a -->
    <div>
        <p></p>
        <span></span>
        <h2></h2>
        <a href=""></a>
    </div>

2.属性和内容

2.1 生成元素的属性

<!-- div#box -->
	<div id="box"></div>
<!-- div.header -->
	<div class="header"></div>
<!-- div[title] -->
	<div title=""></div>
<!-- div[title="haha"] -->
	<div title="haha"></div>
<!-- div#box.hearder[title="haha"] -->
	<div id="box" class="hearder" title="haha"></div>

2.2 {} (生成元素的内容)

<!-- div{这是我的内容} -->
<div>这是我的内容</div>

<!-- div#main.box{我是div元素} -->
<div id="main" class="box">我是div元素</div>

2.3 $ (生成的结构有数字)

<!-- div.box$*4 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>

<!-- div>p{文字内容$}*5 -->
<div>
    <p>文字内容1</p>
    <p>文字内容2</p>
    <p>文字内容3</p>
    <p>文字内容4</p>
    <p>文字内容5</p>
</div>

<!-- div>p.item$$$*5 -->
<div>
<p class="item001"></p>
<p class="item002"></p>
<p class="item003"></p>
<p class="item004"></p>
<p class="item005"></p>
</div>

3.隐式标签

<!-- .box -->
<div class="box"></div>

<!-- #main -->
<div id="main"></div>

<!-- ul>.item${列表元素$}*5 -->
<ul>
<li class="item1">列表元素1</li>
<li class="item2">列表元素2</li>
<li class="item3">列表元素3</li>
<li class="item4">列表元素4</li>
<li class="item5">列表元素5</li>
</ul>

4.CSS的emmet语法

.box1 {
    /* w200+p200+m20+p30 */
    width: 200px;
    padding: 200px;
    margin: 20px;
    padding: 30px;
}
.box2 {
    /* m20-30-40-50 上右下左*/
     margin: 20px 30px 40px 50px;
    /* p-10-20--30 上 左右 下*/
    padding: -10px 20px -30px;
}

九.CSS特性

1.继承

2.层叠

十.HTML进阶元素

基本元素点这里

1.列表

1.1 有序列表 (ol li)

1.2 无序列表 (ul li)

1.3 定义列表 (dl dt dd)

1.4 列表的属性

这些属性都可以被继承

<style>
    /* 去掉多余部分 */
    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
	/* 使用后代选择器 调节想要的样式*/
    ul li span {
        background-color: aliceblue;
        color: beige;
        padding: 0 5px;
    }
</style>

<ul>
    <li> <span>1</span> 海王</li>
    <li> <span>2</span>海贼王</li>
    <li> <span>3</span>药王</li>
    <li> <span>4</span>上海堡垒</li>
    <li> <span>5</span>诛仙</li>
</ul>

2.表格

2.1 table tr td 的基本认识

2.2 表格中的其它元素

2.3 单元格的合并

2.4 border-spacing

2.5关键知识点

2.5.1. 边框的合并
2.5.2. css居中表格
2.5.3.第一行特殊操作

3.表单

3.1 form

3.2 input

3.3 fieldset 和 legend

3.4 select 和 option

3.5 textarea

3.6 input和label的关系

 <div>
     <label for="phone">手机：</label>
     <input type="text" id="phone">
 </div>

4.按钮的实现方式

4.1普通按钮的实现

button的默认type是submit（提交）

4.2重置按钮的实现

4.3提交按钮的实现

4.4 input 和 label

 <div>
     <label for="phone">手机：</label>
     <input type="text" name="" id="phone">
 </div>

其它问题

1.布尔属性

2.去除input的tab键的选中效果

3.textarea不让其进行缩放

4.表单的提交

5.name和value

6.get和post请求

十一.CSS进阶

1.元素类型的划分

块级、行内级元素

替换、非替换元素

行内元素才有替换素，块级全是非替换元素

行内元素只有非替换元素才不能随意设置宽高

技术分享图片

2.display属性

3.visibility属性

4.overflow属性

5.元素之间的空格

6.元素之间的嵌套关系

十二.盒子模型

在HTML内的所有元素都可以看作一个盒子

1.盒子的构成

2.content相关属性

3.padding

4.maigin

4.1 上下margin的传递

如何防止进行传递？

margin一般设置兄弟元素之间的间距

padding一般设置父子元素之间的间距

4.2 margin的上下折叠

垂直方向上相邻的两个Margin有可能会合并为一个margin,这种现象叫做collapse

其它：

word-break

Flex布局

技术分享图片

快捷键

标签语义化

css注意点

  1. 把不同的css放不同的文件（不用担心css太多， 会打包的）
  2. 把公共的样式抽离到base.css中
  3. 不要用标签的属性去控制样式，用css控制
  4. 设置网页图标用ico，png格式，常用大小16x16等

原文：https://www.cnblogs.com/autoloop/p/15302477.html

评论（0）
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣，分享程序人生！