HTML基本标签

概念：hyper Text Markup Language 超文本标记语言
超文本：超文本是用超级链接的方法，将各种不同空间的文字信息组织在一起的网状文本
标记语言：有标签构成的语言<标签名称> 如HTML,XML（注意标记语言不是变成语言）

HTML快速入门
语法：

  1. html文档后罪名.html或者.htm
  2. 标签分为：
    围堵标签：有开始标签，结束标签 如：<html> </html>
    自闭和标签:开始标签和结束标签在一起
  3. 标签是可以嵌套的：注意需要正确嵌套，不能你中有我，我中有你；错误：<a><b></a></b>正确：<b><a></a></b>
  4. 在开始标签中定义属性，属性是由键值对构成，值需要用“号引起来，单双都可以，和数据库一样；
  5. html标签不区分大小写，建议使用小写；

标签学习

  1. 文件标签：
    html：表示html的根标签
    head：头标签，用于指定html文档的一些属性，引入外部的资源；
    title：标题标签
    body：体标签
    <!DOCTYPE html>：html5中定义改文档是html文档

  2. 文本标签：和文本有关的标签

html的注释 <!--注释内容 -->
<h1>to<h6>：标题标签
<p>：段落标签
<br/>：换行
<hr>：显示一条水平线
<b>：字体加粗
<i>：斜体
<font>：字体标签 
属性定义：color，1.英文单词：red，green，blue，2.rgb（值1，值2，值3） rgb（0，0，255）
#值1值2值3值的范围00-ff之间；#ff00ff
width：数值的width=20，数值的单位，默认是px（像素）
%占比相对于父元素的比例；

如果需要显示特殊字符时，需要使用下方列表使用实体名称即可；


image.png
  1. 图片标签：在页面上展示的图片
    img展示图片
<img src="imge/jingxuan2.jpg/>

src图片位置
./代表当前目录下找图片，./image/jj.png；
../代表后退的上一级；

  1. 列表标签：
    有序列表ol，li
    无序列表ul，li，
  2. 超链接标签：<a>定义一个超链接，href 指定打开方式：指定访问的URL统一资源访问，target="_self"默认在当前页面打开_blank在新开页打开
    mailto:502900588@qq.com定义使用邮箱打开
  3. div和span：
    块标签css可以控制span可以很好的控制样式，span文本在一行展示，内联标签，行内标签
    div：每一个div占满一整行。超出会自动换行，块级标签；
  4. 语义化标签： <header> <footer>使用html5中为了提高程序的可读性而产生的；
  5. 表格标签：table表格，tr定义行，td定义列 ，th定义表头单元格；
    cellpadding=0
    cellspacing=0单元格之间的距离，如果设置0则单元格的线会合为一条；设置完成后表格的线会变为一条线；
    bgcolor="red"；
    align：对其方式
    语义化标签：
    <capthon>表格的标题</>
    <thead>表示表格头部分
    <tbody>表示表格体部分
    <tfoot>表示表格脚部分
    colspan合并行
    rowspan合并列

使用meta标签指定字符编码
<meta charset="utf-8"/>gb2312 gbk
gb2312:除了繁体
gbk:包含繁体
utf-8:万国码

案例

1.确定使用table来完成布局
2.如果某一行只有一个单元格则使用<tr><td></td></tr>

  1. 如果莫一行有多个单元格则使用表格嵌套来完成
    <tr><td><table></table></td><tr>

表单标签

表单：用于采集用户输入的数据采集范围；
action：指指定提交的数据的URL
method：指定提交的方式；get请求参数会在地址栏中显示，url长度是有限制的，不太安全，如果是post不会再地址栏中显示，会被封装为请求体中，长度没有限制，安全；
表单中的数据项要想提交必须指定name属性，

  1. input：可以通过type属性值，改变元素展示的样式，取值范围：type：
    text：
    password：密文显示；
    radio:要想实现一组单选框实现必须name值一样，如果选择后返回的是no服务器不知道；
    一般会给每一个单选框value属性这样就会给服务器返回对应的值；
    checkbox：多选框也需要指定value属性
    如果想被默认选中则需要加一个，checked可以指定默认值；
    placeholder:指定输入框的提示信息，当输入框的内容发生变化，会自动清空；
    label：指定输入项文字描述信息，label的for属性一般会和input的id属性对应，如果对应了则点击label区域，会让input输入框获取焦点。
    文件选择框file
    隐藏域，hidden，用于提交一些信息的；
    submit 提交按钮可以提交表单，
    button 一个按钮
    image图片提交按钮，通过src指定图片的路径；
    color取色器
    date日期
    datetime 日期加时间
    email 邮箱：这里会做一个正则校验；
    number只能输入数字

  1. select：下拉列表
    <select> <option> 第一个下拉项 </option> <option> 第二个下拉项 </option> </select>
    也可以加 selected指定默认选中项在option中

  2. textarea：文本域
    cols执行列数每一行多少字数
    rows：行数多少个行

css：

<!DOCTYPE html>
<html lang="en,zh">
    <head>
        <meta charset="utf-8"/>
        <title>淘宝网,套配</title>
    </head>
    <body>
        <!--告诉搜索引擎爬虫,我们的网站是干什么的-->
    <!-- <p>this is pager</p> 段标签(单行标签)-->
        <!-- <h1></h1>到h6标题文档给字体加粗-->
        <!-- <strong>加粗</strong> -->
        <!-- <em>斜体</em> -->
        <!-- <strong><em>加粗斜体</em></strong> -->
        <!-- <del style="color:#999;">$50</del>删除线 -->
        <!-- <address>黑龙江大学30号教学楼</address> -->
    <div style="color: #f40;">//容器
        <em>斜体</em>
        <del>删除线</del>
        </div>
    <span>哈哈哈</span>
    
    
    </body>
</html>


<!DOCTYPE html>
<html lang="en,zh">
    <head>
        <meta charset="utf-8"/>
        <title>淘宝网,套配</title>
        
        <style type="text/css">
            *{
                list-style: none;
                margin: 0;
                padding: 0;
            }
            li{
                margin:0 10px;
                float: left;
                color: #f40;
                font-weight: bold;
                font-size: 14px;
                height: 25px;
                line-height: 25px;
                padding: 5px;
            }
            li:hover{
                border-radius: 20px;
                background-color: #FF4400;
                color: #fff;
            }
            </style>
    </head>
    <body>
    阿斯&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格
    <br>换行;
    <hr>线
    接下来是&lt;div&gt;
    
    <div style="width: 100px; height: 100px;background: #f40;">
        my is brre button
    </div>
    喜欢看的电影
    <ol type="1" reversed="reversed" start="2">
        <!-- reversed 倒叙-->
        <!-- start="2" 从二开始排序-->
        <li>速度与激情8</li>
        <li>哆啦A梦</li>
        <li>复仇者联盟,无限战争</li>
    </ol>
    <!-- ul无须列表-->
    <ul type="circle">
        <li>天猫</li>
        <li>聚划算</li>
        <li>天猫超市</li>
    </ul>
    
    </body>
</html>
<!DOCTYPE html>
<html lang="en,zh">
    <head>
        <meta charset="utf-8"/>
        <title>淘宝网,套配</title>
        
        <style type="text/css">
            *{
                list-style: none;
                margin: 0;
                padding: 0;
            }
            li{
                margin:0 10px;
                float: left;
                color: #f40;
                font-weight: bold;
                font-size: 14px;
                height: 25px;
                line-height: 25px;
                padding: 5px;
            }
            li:hover{
                border-radius: 20px;
                background-color: #FF4400;
                color: #fff;
            }
            </style>
    </head>
    <body>
    阿斯&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格
    <br>换行;
    <hr>线
    接下来是&lt;div&gt;
    
    <div style="width: 100px; height: 100px;background: #f40;">
        my is brre button
    </div>
    喜欢看的电影
    <ol type="1" reversed="reversed" start="2">
        <!-- reversed 倒叙-->
        <!-- start="2" 从二开始排序-->
        <li>速度与激情8</li>
        <li>哆啦A梦</li>
        <li>复仇者联盟,无限战争</li>
    </ol>
    <!-- ul无须列表-->
    <ul type="circle">
        <li>天猫</li>
        <li>聚划算</li>
        <li>天猫超市</li>
    </ul>
    
    </body>
</html>

a标签

<!DOCTYPE html>
<html lang="en,zh">
    <head>
</head>
    <body>
        <a href="http://www.baidu.com" >
        <img id="dome2" src="https://timgsa.baidu.com/timg?im
        age&quality=80&size=b9999_10000&sec=1542626862002&d
        i=2fda7e5b4f8dc82ce20b7505b08fd609&imgtype=0&src=http%3A%2F
        %2Fb-ssl.duitang.com%2Fuploads%2Fitem%
        2F201706%2F04%2F20170604011431_ALNfz.jpeg" 
        
        style="width: 200px; height: 200px;"
        alt="这是鹿晗"
        title="我的天涯"/>
        </a>
        <!-- a连接 -->
        <!-- 锚点 -->
        <!-- 打电话 -->
        <!-- 协议限定符 -->
        <a href="tel:17600446278">打电话</a>
        <a href="mailto:502900588@qq.com">发邮件</a>
        <a href="javascript:while(1){alert('让你手欠')}">点我试试! come on! 来呀!</a>
        <a href="https://www.baidu.com/" target="_blank">www.baidu.com</a>
        <!-- alt图片站位图
        title图片提示符 -->
        <!-- 1.网上的图片
        2.本地的绝对路径 c://a/b/123.jpg
        3.本地的相对路径 123.jpg-->
        <br>br*100
        <div id="dome1" style="width: 100px; height: 100px; background-color: aqua;"></div>
        br*100
        <a style="display: block;position:fixed;bottom: 100px;right: 100px;border: 1px solid black;height: 50px;width: 200px;background-color: #fcc;" href="#dome1">find demo1</a>
        <a style="display: block;position:fixed;bottom: 150px;right: 100px;border: 1px solid black;height: 50px;width: 200px;background-color: #fcc;"" href="#dome2">find demo2</a>
    </body>
    
</html>

输入

    <body>
    <form method="get" action="发给谁">
        用户:<input type="text" name="accout" id="user"  value="请输入帐户名" onfocus="if(this.value=='请输入帐户名'){this.value='' ;this.style.color='#000'}" onblur="if(this.value==''){this.value='请输入帐户名' ;this.style.color='#999999'}" style="color: #999999;"/>
        <p>密码:<input type="password" name="password" id="pwd"  />
    <p><input type="submit" value="登陆"/>
    1我
    <input type="radio" name="xuan" value="xiaobei"/>
    2你
    <input type="radio" name="xuan" value="xioalai"/>
    3他
    <input type="radio" name="xuan" value="wpd"/>
checked="checked"/>
    </form>
    </body>

感觉效果比placeholder="请输入密码"/>好一点

<body>
    <form method="get" action="">
        <select name="pro">
            <option>beijing</option>
            <option>beijing1</option>
            <option>beijing2</option>
            <option>beijing3</option>
        </select>
        <input type="submit"/>
    </form>
    </body>

主流浏览器
IE Trident
Firefox Gecko
Google chrome Webkit/blink
Safari Webkit
Opera Presto
html css javascript
结构 样式 行为
css cascading style sheet 层叠样式表

    <head>
        <!-- 2. -->
        <style type="text/css">
            div{
                width: 100px;height: 100px; background-color:gold;
            }
        </style>
        <!-- 3 -->
        <link rel="stylesheet" type="text/css" href="css/new_file.css" />
</head>
    <body>
    <!-- 1.引入scc样式 -->
    行间样式
    <div style="width: 100px;height: 100px; background-color: aqua;"></div>
    <!-- 2页面级css样式 -->
    <div></div>
    <!-- 3.外部css文件 -->
    <div></div>
    </body>

new_file.css

div{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: blueviolet;
}
#only{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #8A2BE2!important;
}
#lu{
    width: 100px;
    height: 100px;
    background-color: chartreuse;
}
.demo{
    background-color: #8A2BE2;
}
.demo1{
    color: f40;
}
*{
    background-color: #7FFF00;
}
[id="only"]{
    background: #8A2BE2;
}
div span{
    background-color: #8A2BE2;
}
div >em{
    background-color: aqua;
}
/* 并列选择器 */
div.demo{
    background-color: aqua;
}


<!-- 选择器 -->
        <!-- 1.id -->
        <!-- 2.class -->
        <!-- 3.标签div... -->
                <!-- 4.通配符 -->
                   <!-- 5.属性 -->
<!-- 6.父子选择器 -->
<!-- 7.直接子元素选择器 -->
<!-- 8.并列选择器 -->
<!--9.分组选择器-->
    <div id="only"></div>
    <div id="lu"></div>
        <div class="demo1 demo">阿斯蒂芬</div>
<div>1</div>
    <div class="demo">2</div>
    <p class="demo">3</p>

id优先级高
id>class>标签>*
行间样式>id
优先级一样就去写的顺序属性选择器和class选择器==
!important:强制优先级
css权重
分组选择器

/* em{
    background-color: aqua;
}
strong{
    background-color: aqua;
}
span{
    background-color: aqua;
} */
em,strong,span{
    background-color: aqua;
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • 01_Html基本标签
    Subline快捷键 sublime快捷键使用 单标签 注释标签`` 换行标签 水平线标签 双标签 段落标签特点：...
    对方不想理你并向你抛出一个异常阅读 440评论 0赞 0
  • HTML基本标签
    什么是浏览器？ 浏览器是安装在电脑里面的一个软件， 能够让将网页内容呈现给用户查看，并让用户与网页交互的一种软件。...
    Miss一曦阅读 357评论 0赞 2
  • HTML：基本标签
    HTML HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Marku...
    Josaber阅读 340评论 0赞 1
  • HTML基本标签
    ... 标题标签 , 快速实现标题效果 (火狐浏览器调试技巧: F12打开调试界面 , 通过 查看器 查看具体 ...
    ErrorException阅读 217评论 0赞 0
  • html 基本标签
    一、单标签 ◆ 换行标签 ◆ 水平标签线 二、双标签 段落标签 p 特点：上下自动生成空白行。 标题标签 h...
    两点半的杂货铺阅读 403评论 0赞 0

友情链接更多精彩内容