zoukankan      html  css  js  c++  java
  • 初始HTML

    初始HTML

    超文本标记语言,一种用于创建网页的标记语言。

    是一种标记语言,不是编程语言,使用标签来描述网页。

    网页文件的扩展名:.html或.htm

    HTML文档结构

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            
        </body>
    </html>
    
    <!DOCTYPE html>声明为HTML5文档
    <html></html>是文档的开始标记和结束标记。在这中间的所有内容才是真正的HTML
    <head></head>定义了HTML文档的开头部分。
    <body></body>之间的文本是可见的网页主体内容。
    

    HTML标签格式

    几个重要属性

    id: 定义标签的唯一ID,HTML文档树中唯一
    class: 为HTML元素定义一个或多个样式(CSS样式类名)
    style: 规定元素的行内样式(CSS样式)
    

    HTML注释

    <!--注释内容-->
    

    HTML常用标签

    head内常用标签

    <title></title>定义网页标题
    <style></style>定义内部样式表
    <script></script>定义JS代码或引入外部JS文件
    <link/>引入外部样式表文件或网站图标
    <meta/>定义网页原信息
    

    body内常用标签

    基本标签

    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除</s>
    
    <p>段落</p>
    
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    
    <!--换行-->
    <br>
    
    <!--水平线-->
    <hr>
    

    特殊字符

    内容 代码
    空格 &nbsp;
    > &gt;
    < &lt;
    & &amp;
    &yen;
    版权 &copy;
    注册 &reg;

    div标签和span标签

    div标签用来定义一个块级元素,并无实际的意义,主要通过CSS样式为其赋予不用的表现。

    span标签用来定义一个行内元素,并无实际的意义,主要用过CSS样式为其赋予不同的表现。

    块级元素和行内元素的区别:

    块级元素:以另起一行开始渲染的元素。

    行内元素:无需另起一行。

    如果单独在网页中插入这两个元素,不会对页面产生任何的影响,这两个元素是专门为定义CSS样式而生的。

    注意

    关于标签嵌套:通常块级元素可以包含行内元素或某些块级元素,但是行内元素不能包含块级元素,只能包含其他行内元素。

    p标签不能包含块级标签,p标签也不能包含p标签。

    img标签

    <!--图片标签-->
    <img
         src="图片的地址"
         alt="当图片不能加载的时候,就会显示"
         title="当鼠标悬浮在图片上的时候,就会显示">
    

    a标签

    <!--连接标签-->
    
    <!--
    target属性默认是_self,_self会覆盖当前的窗口
    如果target属性是_blank,就会打开一个新的窗口
    -->
    <a href="连接的地址" target="_self">点我</a>
    

    列表

    1. 无序列表

    <ul type="disc">
        <li>一</li>
        <li>二</li>
    </ul>
    
    <!--
    type属性:
    	disc(实心圆点,默认值)
    	circle(空心圆圈)
    	square(实心方块)
    	none(无样式)
    -->
    

    2. 有序列表

    <ol type="1" start="2">
        <li>一</li>
        <li>二</li>
    </ol>
    
    <!--
    type属性:
    	1 数字列表,默认值
    	A 大写字母
    	a 小写字母
    	I 大写罗马
    	i 小写罗马
    
    start属性:表示从第几位开始
    ——>
    

    3. 标题列表

    <dl>
        <dt>标题1</dt>
        	<dd>内容1</dd>
        <dt>标题2</dt>
        	<dd>内容1</dd>
        	<dd>内容2</dd>
    </dl>
    

    表格

    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>xiaowu</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>xiaoyi</td>
                <td>19</td>
                <td>男</td>
            </tr>
            <tr>
                <td>guapi</td>
                <td>20</td>
                <td>男</td>
            </tr>
        </tbody>
    </table>
    
    <!--
    属性:
    	border:表格边框
    	cellpadding:内边距
    	cellspacing:外边距
    	width:像素百分比(最好通过CSS来设置长度)
    	rowspan:单元格竖跨多少行
    	colspan:单元格横跨多少行(即合并单元格)
    -->
    
  • 相关阅读:
    docker 容器启动时设置环境变量source
    解决docker容器中Centos7系统的中文乱码
    Python 常用的标准库以及第三方库有哪些?
    excel 两列值匹配取另外一列值 INDEX MATCH 函数
    Dockerfile编写,以及设置一个自启动脚本
    主机、Docker时间与时区设置总结
    CentOS安装scp命令
    Python3中遇到UnicodeEncodeError: 'ascii' codec can't encode characters in ordinal not in range(128)
    yum 安装 tomcat
    Docker退出容器不关闭容器的方法
  • 原文地址:https://www.cnblogs.com/yunluo/p/11753012.html
Copyright © 2011-2022 走看看