javaweb:1.HTML基础标签&样式

Mr.lel

已于 2023-08-03 16:37:35 修改

阅读量127

点赞数 1

文章标签： html 前端 java vscode

于 2023-08-03 15:15:57 首次发布

本文链接：https://blog.csdn.net/qq_61338849/article/details/132076436

版权

VSCode ! -》基础结构标签

1.标题：

（1）图片标签: <img>
src:指定图像的url(绝对路径/相对路径)

绝对路径：1.绝对磁盘路径(D:/....) 2.绝对网络路径(https://....)

相对路径： ./ 当前目录（可以省略）

../ 上一级目录
width:图像的宽度(px,像素； %，像素/相对于父元素的百分比)
height:图像的高度(px,像素； %，像素/相对于父元素的百分比)

标题标签：<h1> - <h6>

水平线标签：<hr>

2.CSS引入方式:

行内样式:写在标签的style属性中(不推荐) <h1 style="xxx: xxx; xxx: xxx;">中国新闻网</h1>
内嵌样式:写在style标签中(可以写在页面任何位置，但通常约定写在head标签中)

h1 { xxx: xxx; xxx: xxx; }

（1）颜色表示形式：color:

表示方式	表示含义	取值
关键字	预定义的颜色名	red、green、blue...
rgb表示法	红绿蓝三原色，每项取值范围：0-255	rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)
十六进制表示	#开头，将数字转换成十六进制表示	#000000、#ff0000、#cccccc，简写：#000、#ccc

(2)CSS选择器：用来选取需要设置样式的元素(标签)

元素选择器元素名称 { color: red; }

(第一)id选择器 #id属性值 { color: red; } #hid { color: red; } <h1 id="hid">...</h1>

(第二)类选择器 .class属性值 { color: red; } .cls { color: red; } <h1 class="cls">...</h1>

(第三)<span>标签:是一个在开发网页时大量会用到的没有语义的布局标签

一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

字体大小 font-size: px;

3.超链接：

href：指定资源访问的url

target：指定在何处打开资源链接 //（他给特）

_self：默认值，在当前页面打开

_blank：在空白页面打开

规定添加到文本的修饰。text-decoration：规定添加到文本的修饰，none表示定义标准的文本。

underline	规定在文本下方显示线条。
overline	规定在文本上方显示线条。
line-through	规定显示横穿文本的线条。

4.正文

视频标签：<video>

src：规定视频的url

controls：显示播放控件

width：播放器的宽度

height：播放器的高度

音频标签：<audio>

src：规定音频的url

controls：显示播放控件

段落标签：<p>

文本加粗标签: <b>或者 <strong>

换行<br>

line-height：px 设置行高

text-indent：px; 首行缩进

text-align：规定元素中的文本的水平对齐方式

在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符： 

text-align （center,left,right）文本对齐

5.盒子模型

内容区域(content) （康腾特）、内边距区域(padding：20px；上右下左)、边框区域(border：宽度，线条类型，颜色)（包得）、外边距区域(margin 上右下左) 盲针

居中：margin: 0 auto;

如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上 –位置，如：padding-top、padding-left、padding-right …

div标签：一行只显示一个（独占一行）宽度默认是父元素的宽度，高度默认由内容撑开可以设置宽高（width、height）

span标签：一行可以显示多个宽度和高度默认由内容撑开不可以设置宽高（width、height）

6.表格标签

标签	描述	属性/备注
<table>	定义表格整体，可以包裹多个 <tr>	border：规定表格边框的宽度
		width：规定表格的宽度
		cellspacing: 规定单元之间的空间。
<tr>	表格的行，可以包多个 <td>，一tr一行
<td>	表格单元格(普通)，可以包裹内容	如果是表头单元格，可以替换为 <th>（加粗居中）

    <style>
        td {
            text-align: center; /* 单元格内容居中展示 */
        }
    </style>
</head>
<body>
    
    <table border="1px" cellspacing="0"  width="600px">
        <tr>
            <th>序号</th>
            <th>品牌Logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>1</td>
            <td> <img src="img/huawei.jpg" width="100px"> </td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr>
            <td>2</td>
            <td> <img src="img/alibaba.jpg"  width="100px"> </td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>
    </table>

</body>

7.表单标签<form>

<input>：定义表单项，通过type属性控制输入形式

<select>：定义下拉列表 <option> 定义列表项

<textarea>：定义文本域

属性：

action：规定当提交表单时向何处发送表单数据，URL 地址，如果不指定, 默认提交到当前页面

method：规定用于发送表单数据的方式。GET、POST

get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值

post: 在消息体(请求体)中传递的, 参数大小无限制的.

注意：表单项必须有name属性才可以提交

<form action="" method="post">
        用户名: <input type="text" name="username">
        年龄: <input type="text" name="age">

        <input type="submit" value="提交">
    </form>

8.表单标签-表单项

<label>:点击任何区域，都会聚焦到当前区域上

<!-- value: 表单项提交的值 -->
<form action="" method="post">
     姓名: <input type="text" name="name"> <br><br>
     密码: <input type="password" name="password"> <br><br> 
     性别: <input type="radio" name="gender" value="1"> 男
          <label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
     爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
          <label><input type="checkbox" name="hobby" value="game"> game </label>
          <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
     图像: <input type="file" name="image">  <br><br>
     生日: <input type="date" name="birthday"> <br><br>
     时间: <input type="time" name="time"> <br><br>
     日期时间: <input type="datetime-local" name="datetime"> <br><br>
     邮箱: <input type="email" name="email"> <br><br>
     年龄: <input type="number" name="age"> <br><br>
     学历: <select name="degree">
               <option value="">----------- 请选择 -----------</option>
               <option value="1">大专</option>
               <option value="2">本科</option>
               <option value="3">硕士</option>
               <option value="4">博士</option>
          </select>  <br><br>
     描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br>
     <input type="hidden" name="id" value="1">

     <!-- 表单常见按钮 -->
     <input type="button" value="按钮">
     <input type="reset" value="重置"> 
     <input type="submit" value="提交">   
     <br>
</form>