HTML5与CSS

最新推荐文章于 2024-11-13 22:57:03 发布

迟早是我的。

最新推荐文章于 2024-11-13 22:57:03 发布

阅读量244

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_54522911/article/details/118788859

版权

本文介绍了HTML的基本结构，包括标题、段落、字体样式等元素，并详细讲解了行内元素、块元素和行内块元素的区别。此外，还深入探讨了form表单的使用，包括input、textarea、button等元素，以及table表格的创建和样式设置。同时，提到了字体类型和文本装饰的相关CSS属性。

摘要由CSDN通过智能技术生成

HTML

HTML结构

title   我的标题
meta   一个普通标签
charset    字符设置
UTF-8    万国码
body   内容书写区域

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

语义化标签:标签本身能代表标签的作用
h1-h6，p，em(爬虫识别自动记录)
非语义化标签：标签本身不能代表标签作用
span，i，b（爬虫易忽略）
语义化标签:标签本身能代表标签的作用
非语义化标签：标签本身不能代表标签作用

元素

元素可分为块元素行内元素（内联元素）行内块元素

块元素特点：
1.独占一行
2.可以设置宽高当不设置宽高时宽度默认是浏览器的宽度
3.支持所有css样式
块元素：
h1~h6标题标签字体从大到小
p 段落标签
div盒模型用来分布块
ul>li 无序列表（经常用）
ol>li 有序列表
dd>dd（自定义不常用）
table tr 用于表格类型的块元素
hr 水平线
行内元素特点：
1.不独占一行
2.不可以设置宽高当不设置宽高时由内容撑开
3.部分css样式不支持
行内元素：

span 无语义化用来放文字设置样式
a 超链接
b 字体加粗
strong 语义化更强字体加粗
i 斜体字语义化不强多数用来存放logo
em 语义化更强斜体字
s 删除线
del 语义化更强删除线
input 属于表单元素
br 强制换行占位符 hr 水平线
行内块特点：

既有块元素特点又有行内元素特点
可以设置宽高不独占一行支持css样式由自己内容撑开高度

行内元素只能包含行内元素 A标签除外它可以包含任何元素但是不推荐！！！
li只能被ul或者ol包含 ul或者ol子级必须是li
ul默认样式是小黑点 ol默认样式是数字1
去除列表样式是list-style:none; 在样式里面加入
去除方法1：利用css使用list-style:none; (li标签里加入style=“list-style: none;”)
2：直接给列表ul添加类型：无 type=“none”
a标签
超链接标签a,带跳转的超链接标签
```
<a href="图表/名字.html">11</a>
```
http://www.baidu.com
https://有网络协议才能访问在线的网络地址
href=“url”
href 用来设置链接里面是他的路径
url统一资源定位符，是有http://协议名
baidu.com 域名 /item/文件夹名称
index.html文件名
http://baike.baidu.com/item/imdex.html是由四部分组成协议名、域名、文件夹名、文件名

a标签属性

target="self"在当前面打开默认self/赛欧福/
target=“blank” 创建一个新页面并且打开
网络路径由http或者https开始是把文件传输到服务器上的

   <a href="xx.html">666</a>
   <a href="xx.html" target="_blank" title="666" style="text-decoration: none;">666</a>
     target是打开方式="_blank是新增加一个窗口并且打开"   
     target默认值是-self也就是从当前标签打开
     title鼠标移入时显示关键字="666"
     style是样式的意思 用来设置css样式="text-decoration: none用来设置文字什么样子 一般用来去除a标签下划线;
     标签的嵌套方式（怎么嵌套）：
块元素可以包含任何元素  p标签除外  他只能包含行内元素

标签：img
<img src="">
img属性 src 属性值
在标签中写的东西叫属性属性里面的值叫属性值，格式：key=“Word”
src时路径的意思里面写的是文件的路径（也可以是地址）
路径又分为：绝对路径相对路径
绝对路径是从根目录写起的比如你这个文件所在的位置是C盘下的某个文件夹那么就从C盘写起找到这个文件所在的位置
就是说他的地址是从这个文件所在的根目录写起的
列子

 <img src="./img/微信图片_20190715190230" alt=“图片加载失败” width="500px"/>

img标签属性
alt=图片加载失败图片正常加载不显示
绝对路径不推荐使用以防以后地址出错
相对路径：
相对于当前文件写起的
./表示同一级（同级也可以省略） …/表示上一级如果想去下一级中间用/隔开
例子：比如与img同级建立一个文件夹文件下建立一个文件那么这个文件想找到这个图片的时候需要先返回上一级再找到文件
alt属性：当图片加载不出来用文字代替

style="display: block;行标签变块标签代码
style="display: inline-block;行内块标签=内联块级元素
宽度只占自己本身宽度，还是个块级元素，可以设置宽高
display：block和inline-block区别
布局方式：table和css+div
table改版和扩充性较差相对css+div较差
css+div简便易改动更新和改版比表格修改样式更方便，样式更美观

form表单

<input type="text" />文本框输入框
placeholder="请输入你的昵称"表单提示信息
<input type="radio" name="sex"/>单选按钮   
name="sex"二选一或者多选一   name在表单中是获取数据  checkbox复选/多选
selected  默认选中
multiole=“multiole”  多项展开select（下拉框）
option选项
file  文件
<input type="file"/>文件上传
textarea多行文本 rows="5" 行数  cols="70"列字数
<textarea name="" rows="5" cols="70" maxlength="200"></textarea>
按钮button
<button type="reset">重置</button>
<button type="submit">提交</button>
<input type="submit" value="提交">
<input type="reset" value="重置">
Value值
Name获取表单数据  起名字
<label></label>表单中放文字或左侧右侧提示信息

table（表格也是一个标签）

<table>
    <!-- 这是第一行 -->
	<tr>
		<td>这是第一行的第一列</td>
		<td>这是第一行的第二列</td>
        ...
	</tr>
    
    <!-- 这是第二行-->
	<tr>
		<td>这是第二行的第一列</td>
		<td>这是第二行的第二列</td>
	</tr>
    ...
</table>

表格属性
cellspacing是表格属性–table+
cellspacing=“0”（内外边框空隙设置一般为0）–table+
cellpadding （文字到内边框的空隙）–table+
合并行单元格：rowspan=“2”–td+
合并列单元格：colspan=“2”–td+
align（排列）=“center（居中）”+left（左）+right（右）–tr+
bgcolor=“颜色单词”

字体类型

Font-family：“宋体”； 
Font-family：“微软雅黑”；
font-style：-italic斜体-normal正常
字体变细
Font-weight：lighter
-bold 加粗-bolder更粗-normal正常字体

英文首字母大小写切换

首字母大写
Text-transform:capitalize
全部小
Text-transform:lowerase
全部大
Text-transform:uppercase
字体装饰样式

Text-decoration;underline下划线
Text-decoration：line-through中线
Text-decoration：overline上划线
Text-decoration：none清除样式
首行缩进

Text-indent：20px（像素值）
文字水平

Text-align：left默认左对齐
Text-align：center居中
Text-align：right右对齐
文字垂直

Line-height：20px（行高）
字词间距
Word-spacing：20px只能控制英文单词间距
Letter-spacing：20px中文和字母间隙