HTML

标记语言为非编程语言
负责完成页面的结构

组成：
　　标签：被<>包裹的由字母开头，可以结合合法字符（ -|数字 ），能被浏览器解析的特殊符号，标签有头有尾
　　指令：被<>包裹的由 ! 开头
   转义字符：
　 　　&nbsp; 空格   &lt : <  &gt ： >

页面模板

<!doctype html>

        <!--页面开始-->

        <html>

            <!--头-->

            <head>

                <!--字符编码-->

                <meta charset="utf-8">

                <!--页面标签的标题-->

                <title>页面</title>

                <!--内部或外部的css样式 | js脚本 | 页面其他设置 -->

            </head>

            <!--身体-->

            <body>

                <!--存放给展示用户的内容-->

                xx

            </body>

        <!--页面结束-->

        </html>

常用标签

最常用标签:没有语义，也没有特殊功能，也没有特殊样式
    <div></div>
换行标签: <br>

标题标签: h1 - h6

段落标签: <p>xxx</p>     段落与段落之间间隔很大

文本标签：同行显示

span   文本标签

i 斜体

em 斜体方式强调

b 加粗

strong 加粗方式强调

sup 上角标

sub 下角标

超链接标签：a

<a href="连接地址" target="_blank">超链接</a>

href="连接地址" arget="_blank/_self" 属性表示新开一个窗口

锚点：快速定位到页面指定位置
　　<a name='top'></a>   通过 a 的 name 设置锚点
　　<a href='#top'>返回Top</a>   再通过 a 的 href 属性转跳到锚点位
图片标签
<img src="图片地址" alt="资源加载失败显示的文字" title="鼠标悬浮显示文字提示">
列表标签： ul  ol
有序：

    <ul>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

无序：

    <ol>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ol>

表格标签 table



border: 表格边框宽度
cellspacing: 单元格之间的距离
rules: all(全部) | groups(组线) | rows(行线) | cols(列线)
cellpadding: 内容距上距左的距离

<table border="10" width="500" height="300" cellspacing="0" rules="all" cellpadding="20">
    <caption>表格标题</caption>
    <thead>
        <tr>
            <!--th{标题}*3-->
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
        </tr>
    </thead>
    <tbody>
        <!--(tr>td{单元格}*3)*2-->
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </tbody>
    <tfoot>
        <!--tr>td{单元格}*3-->
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </tfoot>
</table>






了解




分割线： <hr>  （了解）

显示文本：<pre></pre>




标签分类




单标签  br hr img meta link 功能具体，不需要内容，设置为单标签   eg:<link rel="stylesheet" href="">
双标签 h1 p span div 具有子标签，包含内容     eg:<h1>内容</h1>




css


负责页面的风格设计




选择器：由标签，类，id单独组合出现

作用域：一组打括号包含的区域

样式块：满足css连接语法的众多样式




css的三种引入方式


1.行间式




样式块写在标签的style的属性中

属性 与 属性 间用 ; 分号隔开

<div style="color: red"></div>




2.内联式




写在style标签中

用选择器与html建立连接

 <style type="text/css">

        .farther div {

            color: red;

            font-size: 100px;

            float: right;

        }

 </style>




3.外联式




css外式完全与html文件脱离，形成单独的.css文件，样式书写在.css文件中

用 link 标签将css文件与 html 建立连接

< link rel="stylesheet" href="" >   rel="stylesheet" 表示连接什么样的文件，样式连接表




三种引入方式的执行顺序：




外联 < 内联 < 行间    行间式最后执行






												


											
html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级的更多相关文章
	

    
						
  1. css中常用的标签
		
    最常用的标签 left 左 top 上 right 右 bottom 下 font 字体 size 大小 width 宽度 height 高度 class 类 label 标签 form 表单 gro ...
    
		
    2. 
						
  2. HTML&CSS基础-html常用的标签
		
    HTML&CSS基础-html常用的标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...
    
		
    3. 
						
  3. Python 44  前端概述 、三剑客 、常用标签与分类
		
    1.前端三剑客是哪三位?文件的后缀内容?在前端开发中的功能是什么? HTML:   .htm .html   内容 CSS:   .css   效果 JS:   .js   行为 2.简述三剑客的主要 ...
    
		
    4. 
						
  4. 常用HTML标签元素结合及简介
		
    常用HTML标签元素结合及简介 <html></html> 创建一个HTML文档<head></head> 设置文档标题和其它在网页中不显示的信息< ...
    
		
    5. 
						
  5. python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器
		
    python3.5 manage.py runserver python Django教程 之模板渲染.循环.条件判断.常用的标签.过滤器 一.Django模板渲染模板 1. 创建一个 zqxt_tm ...
    
		
    6. 
						
  6. 标签语义化之常用HTML标签
		
    一.布局的理解误区 网络上流行管新型的布局方式叫“DIV+CSS”,其实是一个错误的理解,导致了很多人过度依赖与滥用DIV标签, HTML提供了我们一共七八十个标签,其中常用的有三十个左右,DIV不过 ...
    
		
    7. 
						
  7. phpcms v9 常用调用标签（全）
		
    本文介绍phpcms v9中模板标签使用说明. {template ) {==}   {/,,)}     loop是data的时候用{thumb($v[thumb],,)} 分页标签------{$ ...
    
		
    8. 
						
  8. web前端开发常用的10个高端CSS UI开源框架
		
    web前端开发常用的10个高端CSS UI开源框架   随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源 ...
    
		
    9. 
						
  9. WordPress主题制作教程6：常用模版标签
		
    在wordpress中,模板标签指一些字段,比如标题,内容,作者,发布日期,评论数等等,获取静态值和循环里面经常使用. 输出模板标签一般有两种方式:the_yourtag() 输出标签值和get_th ...
    
		
    10. 
						
  10. HTML标签元素分类（HTML基础知识）
		
    HTML标签元素分类 一.按照块级元素还是行内元素分类 块级元素(block-level)和行内元素(inline-level,也叫作"内联"元素). a.块级元素(独占一行) 块 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. Windows server  安装 OpenSSH
			
    文件自己网上下载或百度云盘提取即可 执行setupssh.exe,一直 next 下去 把安装目录下的 sshd_config 文件 copy 到  C:\Program Files (x86)\Op ...
    
			
    2. 
						
  2. 树莓派(Raspberry Pi)使用Shell编写的极简Service
			
    树莓派(Raspberry Pi)运行的系统是基于Debian的,不仅可以运行Shell,还支持systemd和docker,可以编写一个简单的服务,让其在启动时运行,执行一些自动化的操作.这里在Ra ...
    
			
    3. 
						
  3. uvaLive7303 Aquarium （kruskal）
			
    题意:给R*C的房间,每个房间被左上-右下或右上-左下的墙分割为两个小房间,将分割移除有一定花费,问使所有小房间联通需要的最小花费 把每个房间分成左右(上下?)两个点,判一判,本来就联通的加零边,一个 ...
    
			
    4. 
						
  4. Linux里文件和文件夹权限的含义
			
      文件的权限: r : 可以读取此文件的实际内容. w: 可以编辑.新增或者是修改该文件的内容(但不含删除该文件),如果没有r权限,无法w. x : 该文件具有被系统执行的权限,可以删除. 文件夹的 ...
    
			
    5. 
						
  5. Zabbix-proxy安装部署
			
    原文链接:https://www.cnblogs.com/irockcode/p/6754659.html 环境: 因为公司需要监控远程客户机,但server端无法主动连接agent端,客户端可以连接 ...
    
			
    6. 
						
  6. 20165223 《JAVA程序设计》第五周学习总结
			
    教材学习内容总结 第七章要点 内部类 匿名类 异常类 断言 第十章要点 File类 文件字节/字符的输入.输出流 缓冲流 随机流 数组流 数据流 对象流 序列化和对象克隆 使用Scanner解析文件  ...
    
			
    7. 
						
  7. 假如你不小心干掉了系统，你该怎么办？（一次手贱的记录 ~ Ubuntu and Python3.6）
			
    前言 多年未犯低级错误,今天犯了个不大不小的错误,记录下生活点滴吧 今天早上脑海里想了下,如果电脑挂了我要备份哪些东西?然后中午休息的时候就列了一下,没想到晚上就悲剧了... 这个是中午写的: ##  ...
    
			
    8. 
						
  8. 洛谷P4070 生成魔咒
			
    题意:给定字符串,求每个前缀的本质不同的子串数量.字符集1e9. 解:在线构造后缀自动机并统计答案. 答案就是∑len[i] - len[fail[i]] 每次增加的时候,至多对三个节点有影响.然而把 ...
    
			
    9. 
						
  9. vue中显示静态图片怎么引用
			
    有多种方法解决这个问题: 首先,如果使用的是img标签那么可以这样 data () { return { img: require('path/to/your/source') } } 然后在temp ...
    
			
    10. 
						
  10. gitlab 500 服务器错误 重启解决了
			
    查看状态 sudo gitlab-ctl status # 启动Gitlab所有组件 sudo gitlab-ctl start # 停止Gitlab所有组件 sudo gitlab-ctl stop ...
    
			
    11.