• HTML+CSS基础学习标签代码


    HTML基础

    一、HTML页面结构

    1.HTML定义

    (HTML)为超文本标记语言,是写给浏览器的语言, 目前网络上应用最广泛的语言,目前已经更新到HTML5,HTML添加了一些写的语义化标签,放弃了一些旧标签。目的是兼容所有以往标签编写的网页。可以更加优良的识别。应用。 

    2.HTML标签

    (HTML)标签的书写与大小写无关,一般推荐使用小写。特点:由尖括号包围关键词,如《hmtl》。通常成对出现:比如<div></div>,一个开始一个结束标签,一般HTML的标签都是闭合的成对出现,但是,页也有个别的例外。(单标签<img/>、<br/>、<input/>、等)。标签具有属性:属性用来表示标签的特性,如<img src=" " title=" "/>

    3.html基本结构

    <!doctype html>:声明语句,告诉浏览器该文档遵循HTML规范

    <html>:页面基础元素,主要定义页面的开始和结束部分,其他内容包含在<body>标签内

       <head>:页面头部元素,包含当前文档的相关信息,可包含<title>元素,等,定义标题,编码,使用此标签可以将基本信息部分和页面主题内容区分开来。

            <meta charset="utf-8">:meta元信息元素用来定义页面的附加信息,其中包括页面的作者,版权,关键字等相关信息。此元素是一个自封闭的元素,通过其中的属性来添加各种附加信息。此元素在不适用任何属性时,对页面没有影响.(页面编码有多种,但常用的是utf-8,gb2312,utf-8为多国语言编码,gb2312为中文简体编码,设置网页编码的语句为<meta charset="utf-8"/>是在head标签内定义的)

           <name>:元信息元素名称属性,制定文档附加信息名称,例如,最常用的值“keywords”用来定义文档中的关键字,方便搜索引擎的搜索,name属性的语法结构用法:<meta name="keywords" ontent=" 测试软件"/> 

            <title></title> :设定文档的标题,标题名称,会显示在浏览器的窗口的标题栏

       </head> 

       <body>:定义文档主题,包含文档的所有内容(文本,超链接,图像,表格等)

       </body>

    </html> 

    4.常用标签元素

     行内元素*和其他元素都在一行,*宽高设置无效,宽高就是内容撑开容器的宽高,*行内元素只能包含行内元素,不能包含块级元素。

    超级链接:<a href="url"></a>标签定义超链接,href的作用是指明超链接连接到的网址,除了href属性,还有title属性表示链接的提示信息。target属性表示超链接要链接的打开方式,即当点击了链接,选择是在另一个页面打开还是本页面打开,其中属性值包括_blank(新的空白页),_self(当前页)_top(当前页)。

     span标签:常用的文本标签。可以对特殊处理的文字部分添加样式<p>守护 <span style="color:red">执子之手与子偕老</span></p>

    文本格式化标签: <b>粗体</b>,<strong>定义粗体</strong>,<i>斜体<i>,<em>斜体</em>,<del>定义删除</del>,4<sup>2</sup>定义上标文字。3<sub>5</sub>定义下标文字,<mark>表示提醒</mark>

     img图像;展示图片,<img src=" 图片链接 " title=“ 图片名称” alt=“图片名称”/> 

    标签:input标签:账号:<input type="text" placeholder=" 输入框 " required=“required”/> 密码:<input type="password" placeholder="密码框"/>

    单选框架:<label> <input type="readio" value="man" name="sex" id="man">男</label>  <input type="radio" value="woman" name="sex" id="woman"/><label fox="woman">女</label>

    复选框架:兴趣爱好<label><input type="checkbox" name="hobby"/>听歌 </label>

                              <label><input type="checkbox" name="hobby"/>写字 </label>

                              <label><input type="checkbox" name="hobby"/>运动 </label>

    下拉框架:科目<select><option value>语文</option>

                                        <option value>数学</option>

                                         <option value>英语</option>

                          </select>

    按钮:<input type="submit" value="提交">

             <iniput type="button" value="取消">

    文件类型的input:<input type="file" id=" " value=" "/>

    多行输入:textarea <textarea placeholder="输入多行内容"></textarea>

     按钮标签:<button></button>

    块级元素:<div style="background; 颜色"width;宽度,height;高度/> 内容 </div> 

    段落元素:<p></p> 定义一段文字。

    语义化标题,跟随数字增大标题大小:<h1-h6>

    有序列表:<ul> <li></li> </ul> 

    无序列表:<ol><li></li></ol>

    表格table:<table bordr="  px"  cellpadding="  px"  cellpadding=" ">

                   </thead>

                   <tr><th></th></tr>

                   <th><tr></tr></th>

                   </thead> 

     htmkl新增标签

    1.section:独立内容区块,可以用h1到h6组成大纲,表示文档结构,也可以有章节,页眉,页脚,或页眉的其他部分、

    2.article:特殊独立区块,表示这篇页眉中的核心内容

    3.aside:标签内容之外与标签内容相关的辅助信息

    4.header:某个区块的头部信息/标题

    5.footer:底部信息

    6.nav导航条部分信息

    2.媒体标签

    (1)video:视频;<video src=" video/coens.mp4" controls="controls" preload=" auto" loop=" loop">您的浏览器不支持</video>

    (2.)audio音频<atdio src="ocans.mp4" controls="controls"> 您的浏览器不支持</audio>

  • 相关阅读:
    C++ 内存分配(new,operator new)详解
    单例
    实现sizeof
    muduo学习一:简介
    虚函数可以是内联函数吗?
    C++多态实现机制
    [转] Android 开源框架Universal-Image-Loader完全解析(一)--- 基本介绍及使用
    [Android]实现客户端之间的即时通信
    android获取手机通讯录
    java中forName()的作用
  • 原文地址:https://www.cnblogs.com/wtdall/p/10130625.html
Copyright © 2020-2023  润新知