HTML基础标签及css基础

发布时间:2022-07-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了HTML基础标签及css基础脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
<!DOCTYPE&nbsp;htML>
<!-- html5的标识,告诉浏览器这是一个html5的页面
请按解析html5的方式解析 -->
<html><!-- 开标签 -->
<head>
    <;meta charset="utf-8">
    <!-- meta:元标签 -->
    <!-- charset:属性 utf-8:属性值 -->
    <!-- charset:编码格式 -->
    <!-- utf-8:几乎包含了200多种语言里的所有字符 -->
    <!-- GB-2312国家标准 -->
    <!-- GBK国家标准扩展包 -->
    <tITle>hello world</title>
</head>
<body>
<!-- 主体 -->
<div>无实意标签</div>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<p>段落标签</p>
<img src="https://gimg2.baidu.COM/image_seArch/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F19%2F03%2F15%2F75076c485081d15ed9c224ad3e4ce4a1.jpg&amp;refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638409640&t=f92ba2c347633842bf700f96e1053ce8">
<input type="text" name="">
<input type="number" name="">
<input type="password" name="">
<br>
性别:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<br>
兴趣爱好:
<input type="checkbox" name="">
<input type="checkbox" name="">
睡觉<!-- 复选框 -->
<input type="checkbox" name="">
学习       
<ul type="square"><!-- circle 圈-->
    <!-- 无序列表 -->
<li>aaaa</li>
<li>cccccc</li>
<li>aaaa</li>
<li>cccccc</li>
<li>aaaa</li>
<li>cccccc</li>
</ul>
<ol type="a">   <!-- A,i,I -->
<li>aaaa</li>
<li>cccccc</li>
<li>aaaa</li>
<li>cccccc</li>
</ol>
<a href="https://www.baidu.com">
    百度一下
</a>
</body>
</html><!-- 闭标签 -->
最后效果:

HTML基础标签及css基础

@H_618_126

 

 

css基础

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <!-- css:层叠样式表 特点: 1.继承性,继承父级的某些样式 2.层叠性,可被后来者覆盖 --> <link rel="stylesheet" type="text/css" href="css/main.css"> <style type="text/css">/*尖头括号是html*/ /*头部样式表*/ ul{ background: yellow; }/*此为css*/ </style></head><body><div style="width:100px;height:100px;background:lightblue;">

HTML基础标签及css基础

 

 

<!-- 行内样式表,极差,不允许使用 在项目中绝对不允许这样使用--> </div><ul> <li>aaaaaa</li> <li class="aaa">bbbbbb</li> <li class="aaa" id="li3">cccccc</li> <li class="aaa">dddddd</li> <!-- class名可以重复,id名不可以重复,当需要选中多个时用class --> <li>eeeeee</li></ul></body></html>

最终效果

HTML基础标签及css基础

 

 

由此得到一个命名的方法

<!-- 驼峰命名法 大驼峰命名法XiaoMing 小驼峰命名法xiaoMing xiao_ming xiao-ming -->

 

 

css外部链接

li{ color: red;}#li3{background: green;color: red;}.aaa{ background: pink; color: purple;}li{ color: lightblue !important;}

css特征/*css优先级:1.后来者居上,越往后越说了算;2.id>class>标签;3. !important优先级最最高,不可能被后者覆盖,不到最迫不得已不要使用;4.头部样式和外部样式*//*.代表class*//*#代表id*/

 

脚本宝典总结

以上是脚本宝典为你收集整理的HTML基础标签及css基础全部内容,希望文章能够帮你解决HTML基础标签及css基础所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。