[工作]javaweb

最新推荐文章于 2024-09-05 11:00:53 发布

早日躺平8473

最新推荐文章于 2024-09-05 11:00:53 发布

阅读量531

点赞数 28

文章标签： web java

本文链接：https://blog.csdn.net/qq_46546662/article/details/140279111

版权

HTML与css

编写网页需要三种语言，HTML、CSS和javascript。

HTML：网页的结构

CSS：网页元素的形态表现

javascript：网页的交互行为

HTML

主要元素标签介绍

不同的标签会有不同的属性（什么是属性？比如图片标签中的src，该属性指出图片路径），由于属性太多只写一些基础的用的比较多的

头部元素标签：<head></head>

该元素内部必须有<title>标签。该标签内的文字为网页名。

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

文档主体标签：<body></body>

图片标签：<img>

超链接标签：<a href="..." target="...">xxx</a>

href写链接，target写打开方式（有当前页面打开和新页面打开两种）

视频标签：<video>，音频<audio>

src是路径。control显示播放控件，没有播放控件的话没办法播放。

段落标签：<p>

因为就算代码内的文字分行了，写了很多空格。但实际上浏览器并不会显示出来，所以用段落标签实现分行。另外，在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符： 

布局标签

标签没有语义，那没有语义设计出来有什么用呢？比如说你想对某些文字进行不一样的显示，就可以用这些标签包裹文字，设计样式。

	显示	高宽	设置高宽
div	一行只显示一个	宽度默认是父元素的宽度，高度默认由内容撑开	可以
span	一行可以显示多个	宽度和高度默认由内容撑开	不可以

css

引入方式

行内引入：写在标签的style属性中。就像这样：
```
<h1 style="xxx: xxx; xxx: xxx;">中国新闻网</h1>
```
内嵌引入：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）
```
<style>
  h1 {
     xxx: xxx; 
     xxx: xxx;
  }
</style>
```
外联引入：写在一个单独的.css文件中（需要通过 link 标签在网页中引入）
```
h1 {
   xxx: xxx; 
   xxx: xxx;
}
<link rel="stylesheet" href="css/news.css">
```

css选择器

写了这么多css样式，那怎么让浏览器知道哪个样式是属于哪部分的呢？这就需要css选择器来标识了。

元素选择器。就是用已有的html标签来选择。

h1 {
    color: red;
}#css样式

<h1> Hello CSS </h1>#所有使用h1标签的都会使用上面的样式
（html的注释语句太多了懒得打看得懂就行）

id选择器。给这个css样式写个id，用的时候在属性里指定。

#hid {
    color: red;
}（注意#是必须写的）
<h1 id="hid"> CSS id Selector</h1>（使用id为hid的css）

类选择器。这个感觉和id选择器类似。

.cls {
    color: red;
}（注意这个.也是必须的，cls是名字）

<h1 class="cls">CSS class Selector</h1>（使用该css）

另外，优先级：id选择器 > 类选择器 > 元素选择器

盒子模型

盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

所有的文字图片元素之类的都在border内，margin是设置其中整体元素与网页边缘的边距。

center这两种写法都表示居中。

表格与表单、表单项
- 表格

表格标签：<table> 定义一个表格的时候需要这个标签

表头单元格标签：<th>，有加粗居中效果

行标签：<tr>，定义表格中的一行

单元格标签：<td>，普通单元格

定义一个如下图的表格需要的代码如下所示。

<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>