博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
day01
阅读量:4677 次
发布时间:2019-06-09

本文共 2077 字,大约阅读时间需要 6 分钟。

HTML基础

html 基本语法

html标签

  • 单标签 <img /> <img> 通常用简写

  • 双标签 <html> </html>

属性 属于标签 在标签内部

   
ps:单双引号都可以,不写也可以,最好用双引号写

语法规范

  • 标签嵌套 用缩进 (看公司具体规范)

  • 标签名不区分大小写 建议小写

  • 属性名也不区分大小写 建议小写

注释

常用HTML实体

  • &nbsp; 一个空格

  • &lt; < 小于号

  • &gt; > 大于号

  • &amp; & 和号

  • &copy; 版权号

  • &yen; 人民币符号

 

2 html 常用标签

主体结构

  • <html></html>

  • <head></head>

  • <body></body>

HEAD 标签

  • <title></title> 网页标题

  • <meta> 指定网页的元信息 字符集、关键字、描述 seo搜索 属性:charset name content

  • <style></style> 最长用来写css代码

  • <link> 属性:herf type rel 作用:导入css或者指定网页图标

  • <script></script> 导入JavaScript

格式排版标签

  • <hn></hn> 1-6 大标题 seo权重有关 比p标签大的多

  • <p></p> 段落 seo权重有关

  • <pre></pre> 原样输出 用于写代码

  • <br> 换行

  • <hr> 分隔

  • <div></div> 布局用的 本身无意义

文本标签

  • <em></em> 强调 表现为斜体

  • <strong></stron> 强调 表现为粗体

  • <mark></mark> H5新增 表示被选择

  • <sup></sup> 上标

  • <sub></sub> 下标

  • <ins></ins> 添加的内容

  • <del></del> 删除的内容

  • <ruby></ruby> <rt></rt> 加拼音 H5新增 配合使用

 

4 CSS基本语法

使用css

  • link 引入外部的css文件

  • <style></style> 在html中写

  • 使用html元素的style属性 尽量不要使用这种

格式

选择器 {
   CSS属性:值;    CSS属性:值; } ​ 选择器 {
CSS属性:值;CSS属性:值}

注释

/**/

 

css长度单位

px 像素 em 默认大小的倍数 百分比 默认大小参照

css颜色单位

colorname: red/green/bue/purple/orange/yellow/pink/skyblue rgb数字  rgb(34,45,23) rgb(20%,57%,100%) 16进制  #abcdef   #f90 #ccc   推荐使用的

 

5css选择器

1 标签名选择器 tagname {
    } ​ 2 类名 .classname {
    } 3 id选择器 idname {
    } 4 全局选择器 * {
    } 5 组合 后代元素 选择器 选择器 ​ 6 组合 子元素 选择器>选择器 7 群组 选择器,选择器,... 8 多条件选择器 p.item

 

6 选择器优先级

id > class > tagname > * 组合选择器 数数

 

7 css 常用属性

字体

  • font-family 非衬线字体 :微软雅黑 sans-serify 衬线字体:宋体 serify

  • font-size: 30px; 字体大小

  • font-weight normal/blod 加粗

  • font-style notmal/italic 倾斜

  • font-variant normal/small-caps 对英文小写才有效 小型大写

  • font 复合属性

    font:[weight|style|variant] size family

 

颜色

  • color

 

文本

  • word-spacing: 30px; 字符间隔 针对英文

  • letter-spacing: 10px; 字符间隔 针对汉字

  • text-align: left/center/right; 字体水平对齐方式:默认左对齐

  • vertical-align: baseline/middle; 顶线、基线、底线 字体都是在顶线和底线之间蹦跶 只有把文字和图片一起写的时候有点用

  • line-height 行高

  • text-decoration: none/overline/underline/line-through 默认none 最常用来处理超链接的下划线

  • text-indent:2em 首行缩进

  • word-wrap:break-word; 对于长链接或长单词自动断行

  • overflow-wrap:break-word 和上面的一样 css3起的别名

  • white-space: pre/pre-wrap; 格式化输出 /保证换行并缩进

  •  

 

转载于:https://www.cnblogs.com/xujinjin18/p/9443121.html

你可能感兴趣的文章
(一)angularjs5 环境搭建
查看>>
network Driver , TDI(Transport Driver Interface) Drivers
查看>>
[php] 猴子偷桃
查看>>
python-24: re 模块 之四,“*+”对重复的深入理解
查看>>
关于JSP
查看>>
《20171201-构建之法:现代软件工程-阅读笔记》
查看>>
ajaxpro简单调用
查看>>
爬网页数据
查看>>
eclipse内存溢出 参数配置
查看>>
页面元素定位 XPath 简介
查看>>
贪心/poj 1017 Packets
查看>>
[转]loadrunner:系统的平均并发用户数和并发数峰值如何估算
查看>>
Linux下Tomcat重新启动
查看>>
时间复杂度
查看>>
HTML Table to Json
查看>>
Theano 学习笔记(一)
查看>>
1.7 节点进行排序显示
查看>>
web最佳实践
查看>>
spring 集成shiro 之 自定义过滤器
查看>>
验证密码不允许有连续三位重复的正则表达式
查看>>