首页 > 代码库 > css标签

css标签

2024-11-10 18:54:02   203人阅读

HTML标记
<ol>
    <li>标记英文点击tab键直接补全标记</li>
   
    <li>标记一般成对出现，除了个别单标记</li>
   
    <li>注释快捷键：ctrl+?</li>
</ol>

1.引用

`<!DOCTYPE html>`


 2.开始标记

`<html>`

3.字符编码集

`<meta charset="UTF-8">`

4.标记标题

`<title></title>` 
   
5.标题标记

`<h1></h1>`

6.分割标记

`<hr/>`

7.强制换行标记

`<br/>`

8.无序标记

`<ol>`
   ` <li></li>`
   
`</ol>`

9.有序标记

`<ul>`
   ` <li></li>`
   
`</ul>`

10.空格标记

`<br/><br/>`

12.超链接标记

`<a href="http://www.mamicode.com/name1.html"></a>`

13.段落标记

`<p></p>`

14.空格，可以同时使用多个

&nbsp

15.后台排版是什么样，显示就是什么样

<pre></pre>

16大段引用

`<blockquote></blockquote>`

17.小段引用

`<q></q>

18.样式：颜色、字体大小

`<span style="color: red;font-size: 20px;"></span>`

19.超链接

`<a href="http://www.baidu.com" target="_blank"></a>`

20.图片显示

<!--<img src="http://www.mamicode.com/card1.gif" alt="扑克牌"/>
<!--<img src="http://www.mamicode.com/img/card1.gif" alt="扑克牌"/>
<img src="http://www.mamicode.com/img/card1.gif" alt="puk"/>

21.加粗，语气强调

<strong>我是strong标记</strong>

22.加粗

<b></b>

23.斜体，语气强调

<em>我是em标记</em>

24.斜体

<i>我是i标记</i>

25.划分区块

<div></div>

 

26.图片的定义

`<figare>
  <image src="http://www.mamicode.com/img/文件名" alt="米奇“>

  <figcaotion>米奇</figcaotion>
<figare>`

27.视频播放

`<video src="http://www.mamicode.com/img/movie.mp4" controls autopiay loop></video>`

28.音频播放

`<audio src="http://www.mamicode.com/img/blouke.wav" controls autopiay loop></audio>`

29.表格

01.

    `<!--属性：边框为1-->
    <table border="1">

    <!--居中文字标题-->

    <caption>XX班级人员表</caption>`
    <tr>
        <!--表头,字体自动加粗-->

        <th>姓名</th>
        <th>年龄</th>
        <th>班级</th>
        <th>备注</th>
    </tr>
    <tr>
        <!--表示第一行，横向合并4格，显示666，样式靠右-->
        <td colspan="4" align="right">666</td>
    </tr>
    <tr>
        <!--表示第二行，第一项AC,第二项+/-，第三项%，第四项/-->
        <td>AC</td>
        <td>+/-</td>
        <td>%</td>
        <td>/</td>
    </tr>
    </table>`
30.表单

    `<!--action表示提交地址，method表示方式-->
    <form action="#" method="get">

     <!--普通文本框，piaceholder表示提示语句-->
     <input type="text" piaceholder="请输入账号"/>

     <!--maxlength表示最多用户可输入多少字符-->
     <input type="text" maxlength="6"/>

     <!--单纯的搜索按钮-->
     <input type="button" value="http://www.mamicode.com/搜索"/>
    
     <!--提交按钮，把信息提交到你之前保存的路径-->
     <input type="submit">
     <button>提交按钮</button>

     <!--重置按钮-->
     <input type="reselt">

     <!--多选按钮-->
     足球<input type="checjbox"/>
     手球<input type="checjbox"/>
     头球<input type="checjbox"/>
    
     <!--单选按钮，要将所有选项用name="一个值"的方式把他们归为一类即可实现单选-->
     男<input type="radio" name="sex"/>
     女<input type="radio" name="sex"/>
    
     <!--增加“用户名的点击区域，使用户点击用户名或者勾选框时都能实现效果，其中id不会出现相同”->
     <label for="username">&nbsp;用户名</label>
     <input type="text" id="username"/>

     <!--下拉框,name和id可以暂时不用写”->
    <select name="" id="guojia" >
    <option value="http://www.mamicode.com/china">中国</option>
    <option value="http://www.mamicode.com/eluosi">俄罗斯</option>
    <option value="http://www.mamicode.com/yindu">印度</option>
    <option value="http://www.mamicode.com/feizhou">非洲</option>
    </select>

    <!--多行文本框，可以设置样式”->
    <textarea name="" id="" cols="50" rows="5"></textarea>

     </form>
总结：

     post相对于get更安全

     ID具有唯一性，对前台而言可以快速找到元素，修改样式

     name对后台而言有利于数据管理
    
31.网页结构

 01.article

     `<article>
          <h1>章节1</h1> 
          <p>文章</p>
          <article>评论1</article>
          <article>评论2</article>
      </article>`
    
 02.section:子集一定有标题标记

      <body>
         <scetion>
           <h1>章节1</h1>
           <p>详细内容</p>
         </scetion>
         body>
         <scetion>
           <h1>章节1</h1>
           <p>详细内容</p>
         </scetion>
     </body>`

 03.aside:用来装载非正文的内容，例如广告。成组的链接，侧边栏。

 04.nav:网页导航

      <nav>
           <a href="http://www.mamicode.com/#">新闻</a>
           <a href="http://www.mamicode.com/#">新闻</a>
       <nav>
05.sup/sub:上标、下标
     
      <p><sup>2</sup></p>
      <p><sub>2</sub></p>
05.time:时间一般要用time框起来
        
      <p>我们<time>18:00</time>下班</p>


32.块元素/行内元素

<span style=color:blue>**块级元素:**

<pre>
div-划分区块             dl-定义列表          form-表单          h1-一级标题

hr-水平分割线            ol-有序排列          p-段落             ul-无序排列

address-拥有者的地址     table-表格           pre-格式化文本
</pre>

<span style=color:blue>**行内元素:**
<pre> 
abbr-缩写           br-强制换行           em-强调，斜体         q-小段引用

q-小段引用          select-项目选择       i-斜体                img-图片

input-输入框       label-表格标签       span-定义文本内区块    strong-粗体，强调      

sub-下标      sup-上标      textarea-多行对话框

</pre>
33.HTML语义化

`语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
　　1.语义化有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
　　2.在没有CSS的时候能够清晰的看出网页的结构，增强可读性。
　　3.便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
　　4.支持多终端设备的浏览器渲染。`
　　
34.新增表单元素
  
  email 类型用于验证email的格式，当提交表单时会自动验证email域的值
 
?url 类型用于验证 URL 地址的格式，当提交表单时会自动验证url域的值

?number 类型会根据你的设置提供选择数字的功能，min属性设置最小值、max属性设置最大值，value属性设置当前值，step属性设定每次增长的值，某些浏览器还不支持

?range 类型用于应该包含一定范围内数字值的输入域，其会以一个滑块的形式展现，min属性设置最小值、max属性设置最大值，value属性设置当前值，如果没有设置，则其默认值的范围是1-100

?日期和时间类型：HTML5 拥有多个可供选取日期和时间的新输入类型：

 date - 选取日、月、年
 
 month - 选取月、年
 
 week - 选取周和年
 
 time - 选取时间（小时和分钟）
 
 datetime - 选取时间、日、月、年（UTC 时间）
 
 datetime-local - 选取时间、日、月、年（本地时间）
 
?search 类型用于搜索域，比如站点搜索或 Google 搜索，为其加上results="s"属性，则会在搜索框前面加上一个搜索图标

?tel类型用于验证输入的是否是电话格式的内容，此元素现在还没有浏览器支持

?color类型会提供一个颜色拾取器，供用户选择颜色，并将用户选择的颜色填充到此元素中

 

css标签


联系
我们