JAVA学习HTML标签（hbuilx）

lhj071408

已于 2023-11-14 09:50:07 修改

阅读量279

点赞数 3

文章标签： java

于 2023-11-10 16:33:05 首次发布

本文链接：https://blog.csdn.net/lhj071408/article/details/134336134

版权

HTML 超文本标记语言
HTTP 超文本传输协议
HTML5+CSS3

一、网页制作编写工具：hbuilx

网页制作编写工具HbuilderX
网址: https://dcloud.io
谷歌浏览器网址: https://www.google.cn/chrome)

二、网页标签

html: 网页的声明
head: 网页的头部
title: 网页的名称
body: 网页的主体部分

三、网页标签

3.1 标题标签

3.2 水平线标签

<hr/> 单标签

3.3 换行标签

<br/>
单标签

3.4 段落标签

<p></p>

3.5文本标签

3.6超链接

<a href=""></a>
href=“目标网址路径”
站内链接和站外链接
#空连接
<target="_blank"新开一个窗口

3.7图片标签

3.8列表标签、

无序列表<ul><li></li><ul></li></ul>
有序列表<ol><li></li></ol>
定义列表<dl><dt>一级列表项</dt><dd>二级列表项</dd></dl>

3.9表格标签

table 表格
<th></th>默认居中加粗表头
tr 行
td 单元格
border:表格的属性
cellpadding: 内填充，值越大，内容距离单元格越远
cellspacing: 外边距，单元格距离表格边框的距离，一般设为0
colspan=“2‘”合并列
rowspan=“2”合并行
align=“center”中
right右

3.10表单标签

<h2>用户注册</h2>
<form action="#">
账号：<input type="text" /><br />
密码：<input type="password" /><br />
性别：<input type="radio" name="xb"/>男 <input type="radio" name="xb"/>女<br />
爱好：<input type="checkbox" />搭建<input type="checkbox" />搭<input type="checkbox" />建
</form>
text:明文
password:密文框
radio:当选点，name：同一个组
checkbox:复选框
<select >
<option >山西省</option>
</select>
<select >
<option >长治市</option>
<option >太原市</option>
</select><br />
简介：<textarea cols="30" rows="10"></textarea>
select：下拉列表
option：选项
textarea：多行文本框 cols：宽 rows：高
按钮：
<input type="submit" value="提交"/>
<input type="button" value="普通按钮"/>
<input type="reset" value="重置"/>
css层叠样式表
html标签网页布局轮廓
css样式负责表现
javascript 脚本负责行为动态

四.网页中引入css三种样式

4.1内部样式

4.2 外部样式引入外部的样式

4.3行内样式

<p style="color: aqua;">
三种方式优先级
行内优先级>(外部样式，内部样式，取决于哪个在后面)

五.选择器

5.1 标签选择器

p,span,h1

5.2 类选择器

定义的名称为title的类样式.titlel
color: red;
定一个类
<p class="title">直接引用这个样式
然后直接在需要的地方引用

5.3 ID选择器

定义的名称为title的类样式#titlel
color: red;
定一个类
<p id="title">直接引用这个样式
然后直接在需要的地方引用
ID选择器>类选择器>标签选择器

5.4 其他选择器

后代选择器
.ju span{
color: darkorchid;
}

六、CSS样式

6.1 字体样式(常用)

font-size: 20px;
字体大小为20个像素font-family:"微软雅黑"
字体类型为微软雅黑字体
font-weight: bold; 字体加粗
font-style: italiclnormal; 字体为斜体字倾斜|正常
font-weight: normal去除加粗效果

6.2 文本样式

line-height:50px;段落文本行高
color：red段落文本颜色
text—align=center居中 left|right
text-decoration: underline;下划线
text-decoration: line-through;删除线
text-decoration: none;去掉下划线

七.盒子

div标签
width：宽度
height：高度
border: 1px solid red;边框
height: 200px;上下居中

标签分类：

1.块极元素

p、div、ul、li、h1-h6
特征：独占一行，可以自定义宽和高

2.行内元素

span、em、strong、a
特征：不可以独占一行，不可以自定义宽度高度

3.行内块元素

img
特征：不独占一行，可以自定义宽高

4.块级元素和

块级元素转为行内元素: display: inline;
行内元素转为块级元素: display: block;

5.标签的嵌套规则:

1、块级元素可以嵌套任意的元素、p标签除外，p标签只能嵌套行内元素及行内块元素
2、行内元素只可以嵌套行内元素和行内块级元素、不可以嵌套块极元素
快速生成列表的快捷键: ul>liz8
八、超链接样式（伪类）
a:link{
   color: black;
   text-decoration: none;
}
a:hover{
color: aqua;
   text-decoration: underline;
}
a:visited{
访问过的颜色
}
a:active{
点击未放开颜色
}